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.

couchyboi.PNG

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.

123.png

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!

2019-03-05_1139.png

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

theme.liquid.PNG

3.2) Ctrl+F search for the beginning <body> tag

body.PNG

3.3) Paste this code right below the <body> tag

This will create a <div> element that we can edit in CSS. 

ifstatement.PNG

4.) Click on "Add a new asset" in the Assets folder

Update_Click_Add_a_new_Asset.png

4.1) Create a blank file called "custom-fields-announcementbar.css"

createblank.PNG

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.

announcey_boi.PNG

5.) Ctrl+F in "theme.liquid" search for "</head>"

5.1) Paste this code right above the </head> tag

swinglowwwwwww.PNG

6.) Check your code by going to your site!

couchyboi.PNG

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!