Creating an Announcement Bar
Overview
In this advanced tutorial, we'll show you how to create content that displayed in an announcement bar at the top of your site.
In this example, we walk you through how to set up text fields and configure them to be announcement bars. The coding is generic, you just need to copy and paste it in the right places and it will work. No changes necessary.
*Please note, this tutorial is provided as a starting place for experienced coders. We cannot provide support for your custom development efforts. If you're not comfortable coding, we suggest hiring a professional to build this for you.
1.) Create a New Global Text Field
If you only wanted the text to appear on a product page, you would put it in products instead and come with a similar outcome, but since we want it across the entire site we will use globals instead.
This will provide you with the area to type what you want to be in the announcement bar (ie. BoGo on T-Shirts!)
*Note, for this example we will provide the code corresponding with the name we selected ("announcement_bar"). If you wanted to use your own name, you would need to change a few lines of the code provided.
2.) Go to "Edit Globals" in the app
Type your announcement in the newly created field announcement_bar. Make sure to click Save at the bottom of this screen before exiting!
Now we have all the info we need, we just need the code to display the bar at the top of the screen!
3.) Open "theme.liquid" in the Layout folder
Open the Shopify theme code editor and go to theme.liquid in the layout folder
3.2) Ctrl+F search for the beginning <body> tag
3.3) Paste this code right below the <body> tag
This will create a <div> element that we can edit in CSS.
4.) Click on "Add a new asset" in the Assets folder
4.1) Create a blank file called "custom-fields-announcementbar.css"
4.2) Copy and paste this code into the newly created file
This is where the "feel" of our bar will be. If you wanted to make changes to the look of it this is where you would go.
5.) Ctrl+F in "theme.liquid" search for "</head>"
5.1) Paste this code right above the </head> tag
6.) Check your code by going to your site!
If you see the top bar, then you've done it! Now any time you want to put something else there, all you need to do is to edit the value in the app!