How To Code Your Own Announcement Bar | Shopify Site Customization

Note: Before making any changes to the code of your store, always make sure to back up your site.

I’m sure you’ve seen banners like these before. They’re usually found at the very top of websites:

I actually bet you see them all the time, and for good reason. An announcement bar is a simple, yet very effective way of communicating critical, timely, and/or important information to your customers.

It’s a great place to announce things like sales, links to your social media accounts, shipping promotions (such as free shipping), production delays, new blog post announcements, and more. Sometimes merchants even use them for email capture.

Once you get the hang of building your own, you can customize it to do just about anything. The best part is, you don’t need to install an app to have one in your store.

In this tutorial, we’re going to build this announcement bar using a custom Shopify theme section.

Before we can start though, we need to map out all the things we are going to need.

Let’s get mapping!

What Features Do We Want?

It’s important to take a minute to think about all the features you need or want. For the purposes of this tutorial, we’re going to build out the following editable features for our announcement bar section:

Text (the ability to add text and links with basic styling like bold and italic)
Text size
Text color
Background color
Border color
Border size
Padding

Create Your Section File

Click on the dropdown menu labeled Actions and click Edit code.

In the file browser pane, look for the folder called Sections and expand that. Click on the Add a new section link.

Let’s name our new theme section announcement-bar.

Once your file is created, you’ll see the following pre-populated boilerplate section code.

{% schema %}
{
“name”: “Section name”,
“settings”: []
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

This might look confusing, but by the end of this tutorial, it will make more sense. The schema tag is where you’re going to store all the information about your new section.

If you’d like to read more about the Content Schema, check out Shopify’s comprehensive documentation.

Next, we have to place a reference to this file/code where we want our announcement bar to show up on our website. Let’s place ours at the very top of the website.

Open up the theme.liquid file which can be found in the file browser in the Layout folder.

Look for the opening <body> tag and place it right underneath—like this:

<body class=“template-{{ template | split: ‘.’ | first }}”>
{% section ‘announcement_bar’ %}

Getting Started

Next, in your section file, let’s add a div with a class of announcement. The text you want to be displayed in your announcement bar will be wrapped inside of this div.

<div class=“announcement”>{{ section.settings.announcement_text }}</div>

The possibly strange-looking code you see inside the div is called a “liquid tag.” Liquid tags are surrounded by “curly” brackets. It references an ID called announcement_text which we will learn about in a minute.

But First, Input Settings

Input settings are used by the merchant to configure the theme settings for their store. The merchant accesses the settings from the theme editor sidebar.” –Shopify

Input settings are awesome and powerful once you know how to utilize them all. Luckily, Shopify gives examples of each one in their documentation which can all be found here.

Delete everything inside your {% schema %} tag and replace it with the following. Your full code so far should look like this:

<div class=“announcement”>{{ section.settings.announcement_text }}</div>

{% schema %}
{
“name”: “Announcement Bar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “announcement_visibility”,
“label”: “Visibility (On / Off)”,
“default”: true
}
]
}
{% endschema %}

(We also removed the stylesheet and javascript tags, FYI)

We chose the checkbox input type because we want to display one at the top of our section so we can turn the bar on and off.

Now that we have our checkbox configured, we need to wrap our container div (the one we made moments ago) inside a liquid tag powered by our visibility setting.

Wrap the announcement div in an “if” statement:

{% if section.settings.announcement_visibility %}

<div class=“announcement”>{{ section.settings.announcement_text }}</div>
{% endif %}

The new “if” statement we added looks at the settings for a matching ID of announcement_visibility. We set the default to be true, therefore the bar will be displayed.

Let’s Add the Rest of the Settings

Replace the code between your schema tag with the following:

{% schema %}
{
“name”: “Announcement Bar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “announcement_visibility”,
“label”: “Visibility (On / Off)”,
“default”: true
},
{
“type”: “richtext”,
“id”: “announcement_text”,
“label”: “Text”,
“default”: “<p>Default <em>richtext</em> <a href=\“https://example.com/\”>content</a></p>“
},
{
“type”: “range”,
“id”: “announcement_text_size”,
“min”: 12,
“max”: 24,
“step”: 1,
“unit”: “px”,
“label”: “Font size”,
“default”: 16
},
{
“type”: “color”,
“id”: “announcement_text_color”,
“label”: “Text color”,
“default”: “#000000”
},
{
“type”: “color”,
“id”: “announcement_bg_color”,
“label”: “Background color”,
“default”: “#aaa”
},
{
“type”: “range”,
“id”: “announcement_border_size”,
“min”: 0,
“max”: 10,
“step”: 1,
“unit”: “px”,
“label”: “Border size”,
“default”: 4
},
{
“type”: “color”,
“id”: “announcement_border_color”,
“label”: “Border color”,
“default”: “#333333”
},
{
“type”: “range”,
“id”: “announcement_padding”,
“min”: 0,
“max”: 20,
“step”: 1,
“unit”: “px”,
“label”: “Padding”,
“default”: 5
},
{
“type”: “select”,
“id”: “announcement_text_align”,
“label”: “Text alignment”,
“options”: [
{ “value”: “left”, “label”: “left”},
{ “value”: “center”, “label”: “center”},
{ “value”: “right”, “label”: “right”}
],
“default”: “center”
}
]

}
{% endschema %}

We have a lot to unpack here, but once you get the hang of it, it’s easy to grasp. Let’s go setting by setting.

Richtext

Richtext provides just enough formatting to be really useful just as Shopify states: “You can use richtext settings to allow text content with basic formatting. Supported formatting options are bold, italic, underline, links, and paragraphs.” (Source)

Range sliders for the font-size, padding, and border-size

I used a range slider to control the text size. It allows you to choose a minimum and maximum size, as well as a default. I chose to use px, but you can use em or whatever you want. This same set of settings are then reused to control the size of the bottom border of the announcement bar, as well as the padding.

Text & Background Colors

I used the color setting type to configure the background color of the announcement bar itself as well as the text color.

Selection Dropdown

Rounding out our settings, we used a drop-down type for our text alignment.

Presets (Optional)

If you have presets, the section will automatically show up in the theme editor and become a dynamic section. This means you’ll be able to move its location (up or down) on the homepage if your theme is enabled for dynamic sections.

CSS

The last thing we need to do is take all the style configurations we chose, and translate them to CSS. Right after your opening visibility “if” statement, please add the following style tag:

This is where we style the Announcement wrapper element we made at the beginning of this journey. We utilize the same liquid tags to reference each setting type’s ID. It’s important to remember when we’re referencing an ID in our schema, we need to preface it with section.settings.

Final Results

And just like that, you’ve coded your first theme section. You can now alert your customers about your next sale with ease!

There are many other things you could consider adding to this; conditional statements on which page types it’s visible on (such as the homepage only, maybe?).

With what you’ve learned in this tutorial, combined with Shopify’s extensive documentation, you can build out a theme section to do just about anything: Featured product listing, featured collection of products, and so on.

Go back and read through this again, check out the docs and get to work! You can make your theme so much better all by yourself, without the need of a developer.

See the full code here

What Features Do We Want?

Create Your Section File

Getting Started

But First, Input Settings