Announcement Bar
Highlight promotions, shipping offers, and important messages at the top of your store. Rotates multiple messages with optional auto-advance and dismissible functionality.
Overview
The Announcement Bar sits at the very top of your store, above the header. Use it to communicate sales, free shipping thresholds, new arrivals, or store updates. It supports multiple rotating messages with smooth transitions, or a continuous scrolling ticker for a more dynamic look.
Multiple Messages
Moving Ticker
Customizable Colors
Clickable CTAs
Dismissible
Quick Setup
Add the Announcement Bar
The announcement bar should already be in your header group. If not, add it from Section Library → Header.
Add your first message
Click the existing Announcement block and enter your message. Keep it short—10 words or less works best.
Add more messages (optional)
Click Add block → Announcement to add up to 3 rotating messages.
Set colors and behavior
Choose background/text colors and configure rotation speed if using multiple messages.
The best announcements create urgency: Free shipping on orders over 100 dollars or Sale ends tonight work better than Welcome to our store.
Settings
Colors
🎨Background Color
The background color of the announcement bar. Dark colors (black, navy) create contrast and draw attention. Default: black (#1a1a1a).
✏️Text Color
The color of announcement text. Should contrast well with your background color. Default: white (#ffffff).
Layout
↔️Alignment
Where the text appears within the bar:
Rotation
🔄Auto-Rotate
Automatically cycle through messages when you have multiple announcements. Each message displays for a set time before transitioning to the next.
⏱️Interval
How long each message stays visible (2-10 seconds).
- Shorter (2-3s): Creates energy, good for short messages
- Longer (5-7s): Gives time to read, better for longer messages
Default: 5 seconds.
● ●Show Dots
Display dot indicators when multiple messages are rotating. Lets visitors know there are more messages and allows manual navigation.
🔵Dot Color
The color of navigation dots. Should be visible against your background color. Default: white.
Moving Ticker
📜Enable Moving Ticker
Switches from the standard rotating messages to a continuous scrolling marquee. All your announcements scroll horizontally in an endless loop, creating a dynamic, eye-catching effect.
When the ticker is enabled, the Rotation settings (Auto-Rotate and Interval) are hidden and ignored. The ticker replaces the standard rotation behavior.
⏩Ticker Speed
Controls how fast the ticker scrolls (4-120 seconds for one complete cycle). Lower values = faster scrolling.
- Fast (4-10s): Creates energy and urgency
- Medium (15-30s): Easy to read while still dynamic
- Slow (40-120s): Gentle movement, very readable
Default: 18 seconds.
↔️Ticker Gap
The space between each announcement as they scroll (16-240px). Larger gaps make messages more distinct; smaller gaps create a denser, more continuous feel.
Default: 56px.
📐Disable Ticker When It Fits
When enabled, the ticker only animates if your announcements exceed the available width. If all messages fit without scrolling, they display statically instead.
Enable this for a polished experience—short single messages wont awkwardly scroll back and forth when theres plenty of room.
⏸️Pause Ticker on Hover
Pauses the scrolling animation when visitors hover over the announcement bar. Gives them time to read longer messages or click links without chasing moving text.
Default: enabled.
Behavior
✖️Allow Close
Adds an X button so visitors can dismiss the announcement bar. Their preference is saved in a cookie for 30 days—they wont see the bar again on return visits.
Use dismissible bars for temporary promotions. For permanent info like shipping thresholds, leave this off.
Announcement Blocks
Each announcement block contains one message:
📝Message
The text displayed in the bar. Keep it concise—long messages get truncated on mobile. Examples:
- FREE SHIPPING ON US ORDERS OVER 150
- SALE ENDS TONIGHT - UP TO 50% OFF
- NEW COLLECTION NOW AVAILABLE
🔗Make Clickable
Turn the entire message into a link. When enabled, clicking the announcement takes visitors to the specified URL.
🔘CTA Text
Optional call-to-action text that appears after your message (e.g., Shop Now, Learn More). Creates a clear action for visitors.
🌐URL
The page to link to when clicked. Common targets: collection pages, sale pages, or landing pages.
🎨CTA Color
Optional custom color for the CTA text. Leave blank to match the main text color.
Best Practices
Lead with value. Put your best offer first. If you have multiple messages, the most compelling one should be in the first position.
Keep it short. Under 10 words is ideal. Longer messages get cut off on mobile and are harder to read quickly.
Ticker vs Rotation. Use the moving ticker for a modern, editorial feel—great for fashion and lifestyle brands. Stick with rotation for a cleaner, more traditional look or when you have longer messages that need reading time.
Use uppercase strategically. ALL CAPS creates urgency but can feel aggressive. Consider sentence case for a softer tone.
Dont overcrowd. 2-3 rotating messages is plenty. More than that and visitors miss important info.
Update regularly. Stale announcements (Last years holiday sale!) damage credibility. Set a reminder to refresh content monthly.