Header and footer
Announcement bar
A strip of messages above the header, static or rotating.
On this page
The announcement bar shows one or more short messages above the header: free shipping, a store opening, a new collection. It's part of the Header group, so it appears on every page.
- Name in the editor
- Announcement bar (FR: Barre d’annonce)
- Where to add it
- Header group (all pages)
- Accepted blocks
- Message
- Number of blocks
- 5 at most
Section settings
| Setting | Values | What it does |
|---|---|---|
| HeightFR: Hauteur | From 30 to 60px, in steps of 2Default: 30px | — |
| Advance automaticallyFR: Défilement automatique | CheckboxDefault: Off | Cycles the messages on their own. Leave it off unless the bar really needs to move: a shopper reading one message loses it mid-sentence, and the bar carries a Pause control whenever this is on. |
| Seconds per slideFR: Secondes par diapositive | From 4 to 12sDefault: 6s | —Shown when “Advance automatically” is on. |
| Let shoppers dismiss the barFR: Permettre aux clients de fermer la barre | CheckboxDefault: Off | Saved in the shopper's browser, so a dismissed bar stays dismissed on their next visit. |
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 1 | — |
Message block
| Setting | Values | What it does |
|---|---|---|
| TextFR: Texte | Rich textDefault: “Use this space for a store update or special offer” | Links go inside the message: select the words that should carry it and use the link button. The bar has no separate link field, so a message can hold more than one. |
Each message is rich text: to add a link, select the words and use the link button in the editor. A single message can contain several links.
Behavior
Multiple messages
As soon as there are two or more messages, "Previous message" and "Next message" arrows appear and the messages scroll vertically. Without JavaScript, only the first message is shown.
Automatic rotation
With Advance automatically, the messages change on their own. The rotation:
- only starts when there are at least two messages;
- pauses while the pointer hovers over the bar or keyboard focus is inside it;
- always comes with a Pause / Play button;
- never starts if the shopper has asked their system to reduce motion.
Leave it off unless you really need it: a shopper reading a message loses it mid-sentence.
Dismissal by the shopper
With Let shoppers dismiss the bar, a close button appears. The dismissal is saved in the shopper's browser, so the bar stays closed on their next visits.
Height
The bar automatically grows to 44px when it shows arrows or a close button, so those buttons stay easy to tap.
Removing the bar
If you have no announcement, delete or hide the section. A bar with no messages stays visible and shows a help text ("This bar has no messages yet...") on your online store.
Maison 1.0.0