1. What is Announcement Bar?
The Announcement Bar section creates a prominent space at the top of your website to deliver crucial messages, promotions, or time-sensitive information to visitors, capturing immediate attention and effectively communicating important updates or offers.
2. Section Components
| Section | Announcement Bar | Displays important messages and promotions at the top of your website |
|---|---|---|
| Available blocks | Announcement | Used to show promotional messages with optional countdown timers and CTA buttons |
| Promo code | Used to show discount codes with copy functionality and countdown timers |
3. Location & Setup
To add & set up the Announcement Bar section:
- Open the Shopify Theme Editor (Online store > Themes > Customize)
- Navigate to the Header group
- Select the "Announcement Bar" section and click the eye icon to unhide.
4. Highlight Features
- Dual Timer Types: Standard and evergreen countdown timers, with copiable coupon codes.
- Display Options: Stack or carousel format with auto-switch capability
- Sticky Positioning: Optional fixed position while scrolling
- Language & Currency: Built-in selectors with customizable alignment
- Menu Integration: First-level menu items display for easy navigation
5. Common Use Cases
🤔 How to set up the announcement bar?
Don’t know where to start with the Announcement bar section? Just follow these simple steps:
STEP 1: Tap on the Announcement bar section and toggle on "Enable" in the settings panel.
STEP 2: Add the Announcement blocks or Promo code blocks.
Each block shows a single message in a short amount of time. Add more blocks if you need more messages.
STEP 3: Enter the content for each block.
- For the Announcement block, enter your message in the Text field, and add a CTA button by filling in the Button label and Button link fields.
- For the Promo code block, enter your message in the Text field, and type in your discount code in the Coupon code field (make sure the coupon code is valid).
STEP 4: (Optional) Customize the display rule of the bar
In the Announcement bar setting panel, you can:
- Toggle on Show only on homepage, so the bar will not appear on other pages except for the home page.
- Toggle on Enable sticky bar to make the bar remain on top when users scroll.
STEP 5: Click “Save” when done.
🤔 How to show custom links on the announcements bar?
You can display links to other important pages on the announcement bar (like the image below) just by doing these steps:
STEP 1: Preparing a menu in the Shopify admin
- In the Shopify admin, click on the Content tab > Menu > “Create menu”.
- Give the menu a Name, and click “Add menu items” to assign menu labels and links > click "Save".
💡 Note: Only the first level of your menu will be shown on the announcement bar.
STEP 2: Assign the menu in Theme Editor
- Go to the Shopify Theme Editor (Online store > Themes > Customize)
- Click on the Announcement bar section to open the setting panel.
- Scroll down to the Menu setting group.
- In the Menu setting, click “Select” and choose the menu you created in step 1.
STEP 3: Choose the Desktop position of the Menu to be Left or Right.
STEP 4: Click “Save” when done.
🤔 How to show social icons or language/currency selector on the announcements bar?
✍️ To show language/ currency selector:
STEP 1: Follow this guide about Language & currency.
STEP 2: In the Theme Editor, click on the Announcement bar to open its settings panel:
- To show the language selector: Scroll down to Language and currency, then turn on Show language selector.
- To show the currency selector: Scroll down to Language and currency, then turn on Show currency selector.
STEP 3: Click “Save” when done.
✍️ To show social icons:
STEP 1: Visit the Announcement bar setting panel in the Theme Editor.
STEP 2: Turn on Show social icons.
STEP 3: Click “Save” when done.
🤔How to set up a basic countdown timer on the announcement bar?
STEP 1: Tap on a block (Announcement or Promo code) inside your Announcement bar section to open its settings panel.
STEP 2: In text field, include {countdown_timer} variable (e.g., "Flash Sale Ends in {countdown_timer}")
STEP 3: Go to the Countdown timer setting group:
- In the Countdown type, choose Standard timer.
- Set the Timezone and End date.
STEP 4: Click “Save” when done.
🤔How to set up an evergreen timer on the announcement bar?
The evergreen timers create continuous urgency by automatically restarting when they reach zero.
STEP 1: Tap on a block (Announcement or Promo code) inside your Announcement bar section to open its settings panel.
STEP 2: In text field, include {countdown_timer} variable (e.g., "Flash Sale Ends in {countdown_timer}")
STEP 3: Go to the Countdown timer setting group:
- In the Countdown type, choose Evergreen timer.
- Configure the Start date with the right Time zone.
- Set Duration per loop and the Unit(e.g., 7 days)
🔎 Understanding Start Date behavior:
- Future Start Date: Timer shows 0h0m0s until the start date arrives
- Current Start Date: Timer begins counting down immediately
- Past Start Date: Timer calculates where it should be in the current loop cycle
STEP 4: Click “Save” when done.
🤔 How to adjust the auto-sliding rule for the announcement bar?
STEP 1: Add multiple Announcement blocks or Promo code blocks with different messages
STEP 2: Tap on the Announcement bar section and find the Carousel setting group.
STEP 3: Toggle on Enable carousel on desktop for rotating display. (By default, the carousel effect is turned on for the announcement bar. Otherwise, all the messages will be stacked on top of each other)
STEP 4: Configure auto-switch timing between announcements:
- Turn on the Auto-switch bar to make all the messages automatically change.
- Adjust the timing in the Change bar every (only works when Auto-switch bar is ON)
- Turn on/off Show navigation to show or hide the arrows.
STEP 5: Click “Save” when done.
6. Support Information
Need help? Contact our support team at Omni Themes Support.
