Facebook Community
Change Log
Help Center
How To Set Up Shopify Announcement Bar (Simple Guide)
A Shopify announcement bar displays a simple text on the top of the Shopify store and is always visible no matter where your users scroll within your site.
Now that we have mentioned what Shopify Announcement bar is, can you guess the ultimate purpose of it?
Simply put, it is what your users see first and foremost when clicking on your page. Therefore, it is mainly used to showcase what you want customers to be aware of when visiting your page, which could be your new product launch, promotions, important updates, etc.
Let’s dive deep into this article to see in detail its function and how to set up one in your store (sneak peek: a piece of cake, no need for a skilled developer).
What Is A Shopify Announcement Bar?
A Shopify announcement bar is a simple message displayed at the top of your store's website to grab your visitors’ attention. It’s often used to share updates like promotions, new product launches, sales, or special offers, especially during festive seasons.
These bars are sometimes called sticky bars because they are always located at the top of the page, even as users scroll down. Basically, it is always visible, sometimes even when users click on different sites on your page. Moreover, all context on the announcement bar is clickable.
For example, you might use an announcement bar to let customers know about free shipping for first-time buyers, which could encourage more people to make a purchase.
The announcement bar is located at the top, mid-page, and always sticks to one specific area of your page. Source: HappyPoints
But Shopify owners, you know what is the best part about these announcement bars?
Because it is super quick and easy to set up, you don’t need to hire a designer or have technical expertise to create one. It’s already included as one of the features in your theme setting.
The Function of A Shopify Announcement Bar
Shopify announcement bar is always visible, no matter where your users scroll within your Shopify website. Therefore, it is best used for sharing important updates, such as:
-
Shipping delays or regions where international shipments are unavailable
-
New or updated policy pages
-
Current promotions, sales, or new products
Utilizing the Shopify announcement bar ensures that visitors see important updates immediately without having to search or require you to display them on multiple sections for attention.
If that isn’t convincing enough, let’s see how a Shopify announcement bar can enhance your user's visiting experience (that potentially leads to conversion).
1. Create Urgency
Urgency can boost sales, even up to 332% - the CXL case study is living proof!
The announcement bar can be used to encourage faster decision-making by creating a sense of urgency. The key here is to write a captivating hook that can deliver that urgency; use words like “Only,” “Just,” “Few,” etc.
For example, including countdowns for limited-time offers or messages about low stock levels, whatever makes customers feel the need to act quickly.
Creating a sense of urgency is one of the ultimate purposes of the Shopify announcement bar. Source: EComposer
2. Promote Special Campaigns
Needless to say, the Shopify announcement bar is perhaps the first or second thing, besides the big banner, that customers will see on your page.
And you do not want to miss this potential!
Since the bar is prominently placed at the top of the page, customers are more likely to notice it and engage with your offers. Therefore, display or advertise special campaigns or events, like holiday sales or new collection launches.
However, to do this effectively, you need a clear and hook call-to-action (CTA).
Your CTA must guide customers toward taking the desired action.
For example, linking to a sale page or prompting users to sign up for a newsletter. A clear purpose and actionable steps make it easier for customers to act as desired.
3. Remind Customers of Important Information
Instead of showcasing product reminders, you can announce important updates or information that customers must be aware of on your page using Shopify announcement bars.
It could be about store policies, order details, website technical issues, or the next step in the checkout process.
You can utilize the announcement bar to share important updates. Source: Smooth Fusion
*Tip: Write a clear & short important reminder within one line is ideal. The Shopify announcement bar is not where you tell your lengthy story!
4. Built-In or App-Based Features
Some Shopify themes include a built-in announcement bar feature, while others require installing a third-party app.
As mentioned, it is easy to set up without the need for technical expertise or coding experience. All are ready to add and edit within your theme setting.
How To Set Up Shopify Announcement Bar
The shopify announcement bar is already included within your Shopify theme setting. Therefore, you only need to look it up and then add and edit as preferred. Here is the official Shopify guide on how to set up the announcement bar:
Check For Your Shopify Theme Announcement Bar Feature
You can find out if your theme supports an announcement bar using these three methods:
-
Use the Theme Editor: Go to Online Store > Themes in your Shopify admin and click Customize. If your theme has an announcement bar feature, you’ll see it listed either as an Announcement Bar in the sections menu or as part of the "Header" settings.
-
Review Your Theme’s Documentation: If you’re using a Shopify-supported theme, refer to the documentation provided for free themes from Shopify. This often contains detailed steps for enabling and customizing the announcement bar.
-
Contact the Theme Developer: If you’re unsure, reach out to the developer of your theme. For Shopify-supported themes, you can contact Shopify Support directly for guidance.
Add an Announcement Bar
Most Shopify themes only allow each store to have one announcement bar section. However, you can add up to 12 announcement blocks within that bar.
Moreover, there are two placements of the Shopify announcement bar depending on your screen size:
-
On screens wider than 1600 pixels, customization options appear on the right.
-
On smaller screens, they appear on the left.
Once you decide where to place your announcement bar, it’s time to add them:
-
From your Shopify admin, go to Online Store > Themes.
-
Click Customize next to the theme you want to update.
-
In the Announcement Bar section, click Add Announcement.
-
In the Text field, type the message you want to display, such as a promotion, update, or important notice.
-
In the Link field, you can:
-
Enter a specific URL to direct customers to a location outside your store.
-
Use the dropdown menu to link to a page within your Shopify store.
-
Once you’re satisfied with your announcement, click Save.
Watch this YouTube video for instructions: https://www.youtube.com/watch?v=ggi0e80d1Mw
Customize Your Announcement Bar
Once you know where to find the Shopify announcement bar and add one, now you need to customize it.
-
Style: Choose a color scheme to adjust the background and text colors, ensuring your announcement bar aligns with your brand.
-
Function: There are many features that can integrate into your announcement bar, applicable for all Shopify theme that offers this bar, such as
-
A language selector to let customers choose their preferred language.
-
A country/region selector to tailor the shopping experience.
-
Social media icons to encourage customers to connect with your brand.
-
Animation: If you have multiple announcements, add some animations or effects to make it more attractive
-
Enable auto-rotate to cycle through announcements automatically.
-
Let customers navigate through the announcements manually using chevron buttons.
Edit Your Announcement Bar
After customizing it to your branding style, edit your Shopify announcement bar to your preferences:
-
Go to Online Store > Themes in your Shopify admin.
-
Click Customize next to the theme you want to edit.
-
Select the Announcement Bar section to begin customization.
-
Enable Additional Features (Optional):
-
To add a language selector, check Enable language selector.
-
To add a country/region selector, check Enable country/region selector.
-
To display social media icons on desktop, check Show icons on desktop.
-
Set Up Multiple Announcements (Optional):
-
Check Auto-rotate announcements to have them cycle automatically.
-
Use the Change slides every slider to adjust how often announcements rotate.
-
Reorder announcements by dragging the ⋮⋮ icon to move them up or down.
-
Once you’ve made your edits, click Save to apply them to your store.
Watch this YouTube video for instructions: https://www.youtube.com/watch?v=72LLeuBc7bc
Hide or Delete an Announcement Bar
If you no longer want an announcement bar displayed on your Shopify store, you can either hide it or delete it. Hiding keeps the announcement bar saved for later use while deleting it is a permanent action that cannot be undone.
On Desktop
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme you want to edit and click Customize.
-
Click the Announcement Bar toggle to see the list of announcement bars.
-
To hide, hover over the announcement block and click the eye icon. Or to delete, click the announcement bar you want to remove and select Remove Block.
-
Click Save to confirm your changes.
On iPhone
-
Tap the … button in the app.
-
Go to Online Store in the Sales Channels section.
-
Tap Manage all themes and then select Customize.
-
Tap Edit, then tap the Announcement Bar toggle to display the list of bars.
-
To hide, hover over the announcement block and tap the eye icon. Or to delete, tap the bar you want to remove and then tap Remove Block.
-
Tap Save to apply the changes.
On Android
-
Tap the … button in the app.
-
Go to Online Store in the Sales Channels section.
-
Tap Manage all themes and then select Customize.
-
Tap Edit, then tap the Announcement Bar toggle to display the list of bars.
-
To hide, hover over the announcement block and tap the eye icon.
-
To delete, tap the bar you want to remove and then tap Remove Block.
-
Tap Save to confirm the changes.
Shopify Announcement Bar Examples
1. Shopify (Scrolling Announcement Bar)
Shopify’s scrolling announcement bar is one of the most captivating and most used announcement bars due to its subtle movement.
For example, if you look at the image, you can see the scrolling text at the top of the page promotes their free trial that says “Start Your Free Trial” with an arrow.
In fact, this scrolling bar is clickable. So, when combined with continuous motion, this Shopify announcement bar makes the message feel dynamic and interactive while calling users and leading them to the desired page once they click on it.
Scrolling style is one of the most-used announcement bars on Shopify. Source: Shopify
2. Kylie Cosmetics (Rotating Announcement Bar)
Rotating Shopify announcement bar has been implemented by many stores with creative web design, and Kylie Cosmetics is one of them.
The rotating bar, with its soft pastel colors and minimalist design, perfectly matched the brand’s overall aesthetic. When you look at the image, the bar is so well-customized that it feels like a natural part of the website rather than an add-on.
Uniquely, you can have one announcement bar but multiple text lines, which many Shopify owners tend to skip this amazing feature. However, the Kylie Cosmetics website doesn’t, as they showcase three different headlines with various promotional campaigns like Year-end sales, free shipping, and free gifts on seasonal holidays.
Sometimes, you only need a clear and simple CTA like “end of year sale.” Yet, the way you visualize your announcement bar is what decisively attracts users to click!
Customizing your Shopify announcement bar according to your brand style. Source: Kylie Cosmetics
3. Sculpt Activewear (Sticky Free Shipping Bar)
Do you know what can make users instantly take action?
Bringing up their pain point and displaying them where they pay the first and most attention. And that’s how Sculpt Activewear implements on its Shopify announcement bar.
They address a common shopping barrier, the shipping costs, with a sticky announcement bar that promotes free shipping for orders over £25. Of course, as the theme implied, the bar stays visible no matter where users scroll, ensuring this incentive doesn’t go unnoticed throughout the entire visiting journey.
Especially, they also utilize the scrolling bar to display various campaigns that their brand is currently running.
Grab your users’ attention by bringing up their paint point. Source: Sculpt Activewear
From our eCommerce expert analytics, this sticky bar is a clever way to reduce friction and encourage purchases, especially for customers who might hesitate at checkout due to extra fees.
4. ASOS (Countdown Timer Announcement Bar)
As we mentioned in the beginning about the function of the Shopify announcement bar, Shopify owners can utilize this area to create a sense of urgency, and this ASOS countdown timer is a great example.
They utilize this emotion to their advantage with a countdown timer embedded in their announcement bar. Positioned mid-page, the timer grabs attention and gives a feeling of time pressure for upcoming events or sales.
Yes, the only purpose of the countdown timer announcement bar, like what ASOS did, is to push users into taking action. Thus, if you are one of the stores that often offer limited-time deals, this is what you need to implement.
The countdown timer on the announcement bar gives a sense of urgency. Source: ASOS
5. Biko (Brand Mission Announcement Bar)
Biko takes a different approach with their announcement bar, using emotion as a way to connect with their users instead of promotional campaigns or product launches.
The bar clearly emphasizes that its jewelry is proudly Canadian-made and offers free shipping, using them as a hook for first-time visitors.
However, some brands can take this too far with lengthy content that can easily overwhelm users and confuse them into finding the key message you want to deliver, losing the purpose of the Shopify announcement bar.
Therefore, whatever you put on your announcement, remember: “Be short and precise.”
Connecting with users through emotion using storytelling context on the Shopify announcement bar. Source: Biko
Conclusion
Shopify announcement bar, a living example of ‘I might be small, but I'm mighty!’
A simple display on the top of your page, a single line of text, will raise awareness among users about your message and encourage them to take action.
Now, it is time for you to install it and witness how effective it works for your conversion.
