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. 💻
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
Step 2: Go to Sections -> Add a new section -> Select Liquid -> Name it “announcement-bar-section”
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' %}
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
