Announcement Bar
A simple, non-technical guide to the Announcement Bar in your theme.
1. What is the Announcement Bar?
The Announcement Bar is the thin strip that sits at the very top of every page of your store — above your logo and menu. It's the first thing visitors see.
You use it to share short, important messages such as:
- "Free shipping on orders over $50"
- "Summer Sale — 20% off everything"
- A discount code your customers can copy
- A countdown timer for a limited-time offer
- Your store's contact email, phone number, or a country/language switcher
You can show one message or several messages that rotate automatically like a slideshow.
2. Key Features at a Glance
- ✅ Multiple rotating messages — add as many announcements as you like; they cycle automatically.
- ✅ Two motion styles — a smooth continuous "marquee" scroll, or a classic one-at-a-time slideshow.
- ✅ Separate desktop & mobile settings — control speed, direction, and timing differently on phones vs. computers.
- ✅ Copyable coupon codes — show a discount code shoppers can click to copy.
- ✅ Countdown timers — build urgency with a ticking timer (fixed end date, per-visitor sessions, or recurring daily sales).
- ✅ Side info — optionally show your email, phone, and a country/language selector on the sides (desktop only).
- ✅ Full color control — set colors for both your store's light mode and dark mode.
- ✅ Clickable links — message text can link to a sale page, collection, etc.
3. Where to Find It in the Theme Editor
- In your Shopify admin, go to Online Store → Themes → Customize.
- At the top of the editor, open the Header group of sections.
- Click Announcement bar.
The settings are split into two areas:
- Section settings — overall behavior (slider, colors, side info, spacing). These apply to the whole bar.
- Content blocks — each individual message is its own block. Click a block to edit that one message, its coupon, and its countdown timer.
4. Your Messages (Content Blocks)
Each announcement is a "Contents" block. To add another rotating message, click Add block under the Announcement bar. To remove or reorder, use the block list.
Each message block has the following settings:
Message text
| Setting | What it does |
|---|---|
| Text | The words shown in the announcement. You can make text bold/italic and add a link (e.g. link "Shop now" to your sale page). |
| Desktop font size | How big the text appears on computers (8–24). |
| Mobile font size | How big the text appears on phones (8–24). |
Message colors
You can set text and link colors separately for light mode and dark mode (if your store offers a dark theme), so the message stays readable on either background.
Coupon code (optional)
Show a discount code customers can click to copy.
| Setting | What it does |
|---|---|
| Coupon code | The code itself, e.g. `SAVE20`. Leave empty to hide it. |
| Coupon style | Choose "Simple" (plain) or "Tag style" (looks like a price tag). |
| Coupon colors | Background and text colors, with separate light/dark mode options. |
When a shopper clicks the code, it copies to their clipboard and shows a small checkmark to confirm.
Countdown timer (optional)
Add a ticking timer to create urgency. Turn it on with "Enable timer," then choose how it counts:
Timer mode — three ways the timer can work:
- Fixed — counts down to one specific date and time (e.g. ends "2025/12/31 11:59 PM"). Same for every visitor.
- Session — gives each visitor their own personal timer (e.g. "15 minutes left") that starts when they arrive.
- Recurring — a timer that runs on a daily schedule (e.g. every weekday from 9:00 AM to 5:00 PM).
Helpful related settings:
| Setting | What it does |
|---|---|
| Time zone | Base the countdown on the visitor's time zone or your store's fixed time zone (you can pick a GMT offset). |
| Start / End date (Fixed mode) | When the countdown begins and ends. Format is shown in the editor (Year/Month/Day-Hour/Minute/Second). |
| Session length (Session mode) | How long each visitor's personal timer lasts (e.g. 15 minutes), and whether it restarts on every visit or continues where they left off. |
| Active days & daily time range (Recurring mode) | Which weekdays the sale runs and the start/end time each day. |
| End action | What happens when the timer hits zero — hide the whole bar, or hide just the timer and show a final message (e.g. "Sale ended"). |
| Time labels | Customize the words under the numbers — "Days/Hours/Mins/Secs" — including singular vs. plural. |
| Countdown style | Visual look: Simple, Square, or Diamond boxes. |
| Countdown colors | Background and text colors (light & dark mode). |
| Corner roundness | Rounds the corners of the coupon and countdown boxes (0 = square). |
Tip
Use Fixed for a real holiday sale with a hard end date, Session for an "act now" feel on every visit, and Recurring for a daily happy-hour style promotion.
5. Section Settings (the whole bar)
These control the bar overall, not a single message.
General style
| Setting | What it does |
|---|---|
| Width | Narrow (content kept to a centered band) or Wide (stretches across the screen). |
| Enable custom page width + Custom page width | Optionally set an exact maximum width in pixels. |
| Enable slider | Turn the rotating slideshow on or off. With it off, messages simply stack. |
Desktop slider options
These appear when the slider is enabled and control how messages move on computers:
| Setting | What it does |
|---|---|
| Autoscroll | When on, messages glide continuously like a news ticker (marquee). When off, they switch one at a time. |
| Gap between slides | Spacing between messages in marquee mode. |
| Autoslider speed | How fast the marquee scrolls (and which direction, using positive/negative values). |
| Slider type (autoscroll off) | Loop, Slide, or Fade transition between messages. |
| Direction (autoscroll off) | Left-to-right, right-to-left, or top-to-bottom. |
| Pause on hover | Stops the motion while the visitor's mouse is over the bar. |
| Autoplay & Interval (autoscroll off) | Automatically advance messages, and how many seconds each shows. |
| Arrows | Show next/previous arrows. |
Mobile slider options
The same set of options as desktop, but applied only on phones — so you can, for example, scroll slowly on desktop and faster on mobile.
Side clusters (desktop only)
Optional extra info shown on the left and right ends of the bar. These appear on desktop/computers only, not on phones.
| Setting | What it does |
|---|---|
| Show email | Displays your store email (pulled from your theme's global contact settings), with a position (left/right) and optional icon. |
| Show phone | Displays your store phone number, with position and optional icon. |
| Show country | A country/region selector, with an optional flag. |
| Show language | A language selector. |
| Localization position | Whether the country/language selector sits on the left or right. |
There are also style controls for the side info: font size (desktop & mobile), icon size, spacing, vertical alignment, and colors (light & dark mode).
Note
️ The email and phone numbers come from your store's global brand/contact settings, so update them there if they look wrong.
Spacing & colors
| Setting | What it does |
|---|---|
| Desktop padding (top/bottom) | The amount of space above and below the text on computers. |
| Mobile padding (top/bottom) | The same, for phones. |
| Background color (light mode) | The bar's background color in light mode. |
| Background color (dark mode) | The bar's background color when your store is in dark mode. |
6. How It Behaves on Desktop vs. Mobile
- Desktop: Can show rotating messages plus the side clusters (email, phone, country/language). Uses the desktop slider speed/direction/timing settings.
- Mobile: Shows the rotating messages using the mobile slider settings. The side clusters (email/phone/localization) are hidden to save space. Font sizes and padding use their separate mobile values.
Coupon codes and countdown timers work on both desktop and mobile.
7. Things to Know (Dependencies & Limits)
- Email & phone in the side clusters come from your global store contact settings, not typed into this section.
- Side clusters are desktop-only — don't rely on them to show information to mobile shoppers.
- Dark mode colors only matter if your theme's dark mode feature is turned on. If you don't use dark mode, you can ignore the "dark mode" color fields.
- Countdown date formats must follow the exact format shown in the editor, or the timer may not start correctly.
- Many settings appear or disappear depending on other choices (for example, "Interval" only shows when autoplay is on). This is normal — see the FAQ below.
8. Best Practices
- ✅ Keep messages short. One line reads best, especially on mobile.
- ✅ Limit to 2–4 rotating messages. Too many and shoppers won't read them all.
- ✅ Don't scroll too fast. If you use the marquee, keep the speed gentle so people can read.
- ✅ Match your brand colors and check both light and dark mode if you use dark mode.
- ✅ Test your countdown by previewing the store before a sale to make sure the end date and time zone are right.
- ✅ Pair a coupon with a message — e.g. "Use code SAVE20 at checkout" next to a copyable
SAVE20code.
9. Common Questions & Troubleshooting
Q: My second/third message isn't showing. Make sure Enable slider is on. With it off, messages stack instead of rotating. Also confirm each message has text.
Q: A setting I expected disappeared. Many options only appear when a related option is enabled. For example, "Interval" shows only when Autoplay is on; the "Fixed date" fields show only in Fixed timer mode. Re-check the toggle just above where the setting used to be.
Q: My email/phone is wrong in the side cluster. These pull from your store's global contact details, not from this section. Update them in your theme's brand/contact settings.
Q: The side info (email/phone/language) isn't on my phone. That's by design — side clusters show on desktop only.
Q: My countdown timer isn't counting down / shows the wrong time. Check the date format matches the example in the editor, and confirm the time zone setting (visitor vs. store) is what you intended.
Q: The coupon code doesn't copy. The click-to-copy works on the live storefront. If you're testing inside the editor preview, try the actual published store.
10. Summary
The Announcement Bar is your store's top banner for promotions and key messages. You can:
- Show one or many rotating messages (marquee or slideshow style),
- Add click-to-copy coupon codes,
- Run countdown timers for sales (fixed, per-visitor, or recurring),
- Display email, phone, and country/language on the sides (desktop only),
- And fully control colors, sizes, and spacing for light and dark mode.
Keep messages short, don't overload it, and preview before big sales. Used well, it's one of the simplest ways to boost promotions and guide shoppers.