Customizable Announcement Bar Section in Shopify Online Store 2.0

Customizable Announcement Bar Section in Shopify Online Store 2.0

In this article, we will learn how to make Customizable Announcement Bar Section in Shopify Online Store 2.0

Last year in 2022, during Black Friday/Cyber Monday (BFCM), Shopify merchants collectively made sales of over $7.5 billion US dollars – which means it’s an excellent opportunity for Shopify partners to offer services that help customers make the most out of this busy period. 🛍️

When preparing for BFCM, it’s essential to give your customers the option to showcase any ongoing sales or promotional offers to their buyers. Announcements are a simple yet effective way to leverage the season and increase awareness of any deals or discount codes. 🔔

Announcement bars are useful in other situations as well, like displaying critical shipping information, highlighting a new loyalty program, or promoting any custom messages your clients want to present to their customers. 📣

In this article, I’ll demonstrate how to create an announcement bar, expand your custom theme’s feature set, or use Liquid for providing customer services. I’ll also explore how to utilize Liquid section settings to enable customizable options that empower customers to personalize their sale announcements. 💻

Image reprents to make Announcement Bar Section in Shopify Online Store 2.0 to let customer know about black friday sale.

Creating Customizable Announcement Bar Section in Shopify

Before we dive into creating an announcement bar, let’s decide what elements we want to include in this section. Depending on your customers’ needs, you may require text, headlines, or other input settings. Here are some settings you can add: ✨

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

For this tutorial, I will create settings to enable the announcement bar, select background and text colors, add text, and embed hyperlinks. By using the Liquid section object, we can create settings accessible from the theme editor to specify the heading text, define the link URL, and choose which images we want to display. 🎨💬🔗🖼️

Step 1: Go to Online Store -> Themes -> Edit Code

Image repressents to go  to theme editor.

Step 2: Go to Sections -> Add a new section -> Select Liquid -> Name it “announcement-bar-section”

Image represents to create a new section for announcement bar.

Step 3: Let’s add some input settings in the schema. I have added 2 checkboxes, enabling options in the theme editor to Show/Hide Announcement Bar and the second option to Show Announcement bar Only for Home or for all pages.

Step 4: Let’s add some liquid code. Place the below code at the top of the file. We have placed a simple if Statement about whether we want to display the announcement bar or not and whether to show the announcement bar for only the home page or for all pages.

Step 5: We will create 2 options to add Announcement Text and Announcement Link. Please update the code.

Step 6: We need to add these options to the schema so that we can edit the text and the link later in the theme editor. The entire settings will look alike as below.

Step 7: Let’s call this section file in the theme. liquid. Go to Layout -> theme.liquid and place the below code at the very beginning of <body>

{% section 'announcement-bar-section' %}
Image reprent where to place the code

Step 8: Now, Go to Customize Theme -> Custom Announcement Bar -> Click on Show Announcement. It will show an announcement bar on the top as shown in the image below.

Step 9: It’s time to design our announcement bar.🎨 Add the below code in the settings schema.

Step 10: Add the below code at the top of the file, and save the file.

Step 11: Now, Go to Theme Customization and check the announcement bar.

The entire file will look like below.

You might also like: Building Dynamic Sections in Shopify Online Store 2.0

Hardik Davra
Hardik Davra
Hardik Davra is a CEO at Candisoft Tech, a Company specializing in Shopify Development. I have over 5 years of experience in Shopify website development.

Leave a Reply

Your email address will not be published. Required fields are marked *