How To Add A Sliding Announcement Bar Manually In Shopify

The announcement bar helps shop owners alert their store visitors or customers to the latest updates about discounts, sales, expiring items, new collections and so much more.

In fact, you only can add a message on this bar. If you want more messages, an announcement bar with a with message slider is a solution for you.

LIVE DEMO

This article will teach you how to create the announcement bar with a slider in Shopify.

Following the below steps to know how to do that:

Step 1: Create a new section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions, and then click Edit Code.
  3. Under the Sections folder, click on Add a new section link to create a new section.
  4. Fill the section name – hura-announcement-bar to the field on the dialog and click Create section button.
  5. In the online code editor, please replace the existing code with the below code.
  6. Click Save.

Step 2: Add the section to the header

  1. Under the Layout folder, click onto theme.liquid to open file editor.
  2. In the online code editor, find the script{% section 'header' %} and insert the below code before this script.

  3. Click Save.

Step 3: Create a new Sliding Announcement Bar

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize.
  3. You will see a new section  – Announcement Bar.
  4. Click on Add Message to add a new message slider. And you can configure the options for the slider.
  5. Click Save and you are done.

LIVE DEMO

You may also like...

5 Responses

  1. Kris says:

    Hello, thank you for sharing! But I found that when I tested the code on my website, the pre and next buttons were in the middle of the entire website page, not in the middle of the Announcement Bar. I noticed that the CSS of these codes was introduced into your link. May I ask you Is there a problem with the code? Thanks in advance!

  2. Steve says:

    Awesome code! mate a quick question, it loads the code for a split second then loads the website, any reason for this?

Leave a Reply

Your email address will not be published. Required fields are marked *