How to Create a Customizable Announcement Bar Section in Shopify

Last year,over $1.5 billion USD was collectively soldby Shopify merchants around the world during Black Friday/Cyber Monday (BFCM)—which means it's a great opportunity for Shopify Partners to provide services that help clients gain visibility during this busy period.

In the run up to BFCM, it's important that your client's themes give them the option to let their buyers know there's a sale or promotional offer running. Announcement bars are a simple yet effective method to leverage this time of year and drive awareness to a deal or discount code.

Announcement bars are also useful in other circumstances, like displaying important shipping information, showcasing a new loyalty program, or promoting any custom messages that your clients want to present.

In this article, I’ll demonstrate how to use Liquid to build an announcement bar section, expanding the feature set of your custom themes, or providing client services. I’ll also look at how Liquid’s section settings can be leveraged to allow customizable options, which empowers clients to personalize their sales announcements.

Creating a new announcement bar section

Before we get started creating an announcement bar, we need to decide what types of elements we would like to contain in this section. Depending on your client’s requirements you may need text, headings, orother input settings. Here are some of the settings you could add:

• Text
• Hyperlinks
• Color
• Font-size
• Checkbox

For this tutorial, I'll be creating settings for enabling the announcement bar, selecting background and text colors, adding text, as well as embedding a hyperlink. By using Liquid’s section objects, we can create settings which will be accessed from the theme editor to assign the heading text, link URLs, and choose which images we would like to appear.

The first step we need to take is to create a new file in our theme's/sectionsdirectory, calledannouncement-bar.liquid. You could add new settings to an existingheadersection file, but for the purposes of this tutorial, we'll be creating a new section which will be positioned just above the header.

Once this section file is created, we can add the basic markup that will contain the announcement message, as well as simpleifstatements that will correspond with section settings:

What we'll create here are section settings that will allow us to display the announcement bar when specific options are enabled. We'll also add a checkbox to enable the announcement bar just on the home page, since your clients may not want this appearing on every page of the store. Below where we have added the HTML, we would include these schema tags and JSON:

As you can see, the IDs within the JSON array in thecorrespond with the objects we see in the markup. For examplesection.settings.show_announcementhas a corresponding value within the schema tags which creates a connection between the two elements and instructs the theme editor which properties are available to it.

In this case, a checkbox will appear on the theme editor, which if ticked will display the announcement container and message. We also will have a second checkbox to allow us to hide the announcement bar on non-home pages. Now let's add some content options.

You might also like:How to Use Shopify Theme Settings to Create Mobile-Specific Logos.

Content options

We want to allow text and a hyperlink on the announcement bar, so we'll add objects that can access a text field and a URL value. Again, we can useifstatements to hide this content if they're not being used:

The two newsection.settingsobjects will allow us to create options for adding text and a URL, once we create corresponding values within the schema tags. There are specific input types for bothtextandurlwhich will generate options in the theme editor:

最后除了我们要使这一秒tion is to add options for choosing background and text colors for our announcement section. What is very helpful is that it's possible to adjust the CSS of our theme, based on values within the schema tags. For example, we could create a setting with a type ofcolorwhich would send a selected color value to a CSS property.

What this would look like in our case would be a section setting like this:

We can give the announcement bar a default color of black, and when viewed on the theme editor, your clients will see a color picker tool. Theannouncement_bar_colorID would this time be referenced within