The Announcement bar is a thin strip, usually at the very top of the page, for short messages like "Free delivery this week" or "Cash on delivery available". It can show one message or rotate several.
Add an announcement bar
- Open the builder and go to the page you want.
- In the Sections tab, click Add new section and pick Announcement bar in the Layout group.
- Drag it above the header if you want it at the very top.
- Select an Announcement block and type your message in Announcement text.
- Click Publish.
You can add up to 2 announcement bars per page, on any page. Each page keeps its own copy. To show the same bar everywhere, use Apply to all pages, see Sections and blocks.
Messages
Each message is an Announcement block. Click Add new block to add one, up to 7 per bar. Drag them to change their order. Hidden messages and empty messages are skipped. With only one message, it stays still and centered.
Animation settings
The Animation settings only appear when the bar has two or more visible messages.
- Mode: Slider shows one message at a time, with small arrows to go back and forward. Ticker scrolls all messages in one continuous line.
- Direction: Left or Right, the way messages move.
- Time to next announcement: from 2 to 10 seconds. In Slider mode it is the time each message stays. In Ticker mode it sets the speed: the time the line takes to cross the screen, so a higher number scrolls slower.
- Separator: a short character or emoji placed between messages, for example a dot or a star. Ticker mode only.
The ticker pauses while a shopper points at it, touches it, or moves to it with the keyboard, so they can read it. Shoppers who turned on reduced motion on their device see it still.
Layout and appearance
- Section width: Page keeps the messages in your page width, Full uses the whole screen width.
- Color scheme: the bar background and text colors. A strong contrast with the header helps the bar stand out. Schemes are edited in Color schemes.
- Font size: from 10 to 30 pixels.
- Padding: space above, below, and on the sides of the text.
- Custom CSS tab: your own styles for this bar only.
Ideas
- Two bars: one fixed message (for example your delivery promise) and a second bar that rotates offers.
- Short messages work best on phones, where the screen is narrow.
- Seasonal message: hide the bar with the eye icon when the offer ends, and show it again next time. Its messages are kept.
Good to know
- I cannot find Mode or Separator: add a second message first. Separator also needs Mode set to Ticker.
- The bar is not on other pages: each page has its own sections. Add it there, or use Apply to all pages on pages that already have a bar.