Announcement bar
A guide to set up a flexible announcement message bar at the top of your site in Sleek theme
An announcement bar is a short snippet where you can showcase a message to your site. Using an announcement bar on your website is one of the easiest ways to draw visitors' attention.
You might add an announcement bar to highlight the following information:
shipping information,
new stock alerts,
any promotions, such as sales or new gift cards, etc.
In this article, we will show you how to add an Announcement bar section.
How to add an Announcement bar section to your Shopify store
Steps:
In the theme editor (Customize),> click Add section.
Select the Announcement bar.
Make necessary changes.
Save the settings.
How to edit an Announcement bar section
Section settings
Adjust the Color scheme for this section.
In Shopify, the Color scheme (a set of colors) of your store can be set within the Theme settings. It helps group elements and their respective colors, making your store visually appealing and cohesive. You can apply the color schemes to different sections throughout your online store with a color scheme picker.
Desktop content width: Determine the width of the announcement content on the desktop (20% - 100%).
Auto-rotate announcements: Change the announcement slides automatically (when there are 2 announcements or more) across the browser or device.
Change every: Set a duration for the slider to change every 3-10s (when the Auto-rotate slides option is enabled).
Section padding
You can modify the spacing above and below the section by adjusting the slider to change the values of the Top padding and Bottom padding.
Block settings
Announcement
Text: Input the information needed.
Link: Direct customers to a specific page when clicking the bar.
Countdown timer
Add a countdown timer block and adjust the Ends time of the event.
Date formats accepted:
| Name | Format | Example |
|---|---|---|
24 hour format | YYYY/MM/DD HH:MM | 2023/10/04 23:30 |
12 hour format | YYYY/MM/DD HH:MM aa | 2023/10/04 11:30 PM |
Insert the heading or content of the event in the Text field.
You can also display a call-to-action button next to the countdown timer to redirect customers to your desired pages.
Add a Label and Link for one or both, then choose a Button style (Primary button/ Secondary button/ Underline button).
Best practices
✅ Do:
Use short texts (make sure you try your store on mobile, where it is narrower).
Limit the number of rotating texts to 2 or 3. While you can use more, your customers probably won't see them.
⛔ Don't:
An announcement bar can be easy to miss due to its small size. Therefore, avoid using the announcement bar for critical information. Instead, use a bigger section in the page.
Last updated
