HOW TO: Add Announcement Bar in your Shopify Store (Code Included)


Shopify now includes an announcement bar in the header section of its main page in the debut theme. However! Sometimes you need two, right? And you want them to stand out from one another... At least, I know I needed that! 

When I went on vacation I still needed a bar showing my shipping offer and also wanted to let my customers know that, yes, I'd be away... but when I'd be back and that orders could still be placed. So I went on the hunt for some code to use because I'm a broke ass bitch who can't afford to hire a developer. I can be resourceful though, and I'm happy to share my resources. 

I want to premise this that I wrote zero of this code; I simply altered some to get it to work. The original (where I found all of mine) is here and is a bit outdated. You may have to alter it too to get it to work for you, your theme and your time... who knows.

One of my favorite things about this code is that it also has a simple countdown to show your customers how much is left until free shipping. All this without having to purchase an app. Wut wuuuuut. Sign me up! 

add this much money to receive free shipping

So if you want your shop to go from this:

screen shot of website with one announcement bar

To this:

screen shot of website with two announcement bars

Follow along below!


From your Shopify home page:

1. Click on ONLINE STORE

2. Click on THEMES

3. Click on ACTIONS

4. Click on EDIT CODE

screen shot of steps to follow to get to edit code in shopify

 5. Scroll down to the SECTION area and Click on ADD A NEW SECTION

add a new section image screen shot


6. Type in: announcement-bar2

screen shot step 6 type in announcement bar 2

 7. Your new file will have code in it. HIGHLIGHT AND ERASE ALL THE CODE IN THERE. 

 8. Open THIS LINK to copy all the code and paste it in the new section file you created. 

9. SAVE the file.

10. Now let's get back to the customize section by going back to the Shopify Home Page.

1b. Click on online store

2b. Click on Themes

3b. Click on Customize

get to customize

11. A separate Announcement Bar section is now available for editing. 

2 sections are now in shopify customize section


Hope this helps someone out there! 



Leave a comment