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!
So if you want your shop to go from this:
Follow along below!
GET TO THE CODE ALREADY
From your Shopify home page:
1. Click on ONLINE STORE
2. Click on THEMES
3. Click on ACTIONS
4. Click on EDIT CODE
5. Scroll down to the SECTION area and Click on ADD A NEW SECTION
6. Type in: announcement-bar2
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
11. A separate Announcement Bar section is now available for editing.
Hope this helps someone out there!