Announcement bar
Show sitewide messages above your header — free shipping notices, sales, store updates — as a slideshow or a scrolling marquee.
Last updated About 4 hours ago
The Announcement bar is the thin strip above your navigation. It lives in the Header group: open the theme editor and click Header > Announcement bar.
Add your announcements
Each message is its own Announcement block — click Add block to create one. For every announcement you can set:
- Text, plus an optional Mobile text if you want a shorter version on small screens.
- A Link, so the whole announcement is clickable — or enable Show button instead to add a small button next to the text.
- An Icon from the theme's icon library (or upload your own — SVG files work best). You can size it and hide it on mobile.
Choose how multiple announcements display
With more than one announcement, the Announcement style setting decides how they appear:
- Slideshow shows one announcement at a time. Slides change automatically on a timer you pick (3-6 seconds), or only when visitors click the arrows if you set Slide changes to On click.
- Marquee scrolls all announcements across the bar continuously. You control the speed, direction, the space between messages, and an optional divider (dot or line) between them.
Both styles pause when a visitor hovers over the bar, so nobody has to chase a moving link. Turn this off with Pause on hover if you prefer.
💡 Tip: Marquee works nicely for short, punchy messages ("Free shipping over $50"). If your announcements are longer sentences, slideshow is easier to read.
Style it
Under Style, pick a color scheme for the bar and set the text size and weight. A color scheme that contrasts with your navigation helps the bar read as its own element.
Add a menu or social icons
The bar can double as a secondary navigation. Under Content, enable Show menu and pick a small menu (great for "Help", "Track order", or store locator links), or enable Show social media icons. These appear alongside your announcements on desktop.
Other settings
Layout — top and bottom padding for the bar.
Visibility — show the bar on all devices, desktop only, or mobile only. See Visibility settings.