Announcement bar
Turn on Auto-rotate announcements for timed rotation. Shoppers can use the dots or Pause/Resume. Rotation pauses for keyboard focus, hovering, reduced motion, disabled theme animations, a hidden tab or an off-screen bar. Allow dismissing remembers the current messages for that browser; changing the messages makes the bar appear again. Without JavaScript only the first announcement appears.
The Announcement bar is the one-line strip above (or below) the header — free-shipping notes, sale warnings, service announcements. Multiple messages rotate automatically, and shoppers can dismiss the bar.
What it does
Section titled “What it does”Use it for store-wide short notices. Each announcement is one line with an optional icon and link; several announcements take turns. It normally lives in the header area of your template — add or edit it there.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- In the left tree, open the Header group at the top.
- Add or select the Announcement bar section there.
- Edit its Announcement blocks, then save.
Choose a style
Section titled “Choose a style”| Setting | Default | Options | What it does |
|---|---|---|---|
| Color scheme | Scheme 4 | Your store’s color schemes | Bar background and text color |
| Auto-rotate announcements | On | On / Off | Rotates multiple announcements by itself |
| Change message every | 5 s | 3–10 s, step 1 | How long each message shows |
| Allow dismissing | On | On / Off | Shows a close button; the bar stays hidden for the visitor afterwards |
Set it up: quick start
Section titled “Set it up: quick start”- Open the Header group and select Announcement bar.
- Edit the demo announcement: your text, an icon, and a link.
- Add a second Announcement block if you have more to say.
- Save and confirm the bar sits where you want it (drag the section in the Header group if needed).
Settings
Section titled “Settings”Section settings
Section titled “Section settings”See the table under Choose a style — color scheme, autoplay, speed, and dismiss are the section’s settings.
Blocks
Section titled “Blocks”| Block | Limit | What it adds |
|---|---|---|
| Announcement | Add one per message | One rotating message |
Announcement settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Text | “Free shipping on orders over $49” | Text | The message — one short line |
| Icon | Truck | None / Truck / Paw / Gift / Tag / Leaf | Small icon before the text |
| Link | Empty | URL | Makes the whole message clickable |
Images and content tips
Section titled “Images and content tips”- No images — this is a text strip. Keep messages under ~60 characters so they fit one line on phones.
- Put the link on messages that lead somewhere (a collection, a policy page); plain notices need none.
Good to know
Section titled “Good to know”- Dismissed stays dismissed for that visitor — don’t put time-critical must-see info in a dismissible bar.
- Rotation pauses politely: the bar rotates only with more than one announcement, and respects reduced-motion preferences.
- Placement is flexible: it usually sits at the top of the Header group, but you can move it in the template tree.
Example setups
Section titled “Example setups”Shipping promise. One announcement: Truck icon, “Free shipping on orders over $49”, linked to the shipping policy page. Dismiss on.
Sale countdown companion. Two announcements — “Summer sale — up to 30% off” (linked to the sale collection) and “Ends Sunday” — rotating every 5 s, dismiss off.
Common questions
Section titled “Common questions”I closed the bar and it never came back. That’s the dismiss feature — it remembers per visitor. Preview in a private window to see it again.
My messages don’t rotate. Rotation needs Auto-rotate announcements on and more than one Announcement block.
The text is cut off on my phone. Shorten the message — the bar keeps to one line.