The Announcement bar section is the thin bar above the header. It shows short messages, such as a discount code or a shipping offer, and it can also hold a menu button, language and country selectors, and a light/dark switch. It shows on every page. In the editor sidebar, it is the first section under Header. If you removed it, click Add section under Header and select Announcement bar.
The bar uses your palette's primary color as its background, black in the default palette, so it stands out from the page. Color settings sets that color.
Messages
Each message is an Announcement block. To add one, click Add block in the Announcement bar section and select Announcement. A block with an empty Text does not show.
Setting
What it does
Text
The message. Bold text shows in capital letters. In a message with a link, bold text also shows in the accent gradient from Color settings.
Link
Turns the whole message into a link. The message is underlined when the pointer is over it.
These settings apply to all messages:
Setting
What it does
Bar style
Floating (default) shows the bar as a box with rounded corners and a small gap around it. Full runs the bar from one edge of the screen to the other.
Message style
Carousel (default) shows one message at a time in the middle of the bar, with an arrow on each side when there are two or more. Marquee scrolls all the messages across the bar in one continuous line.
Auto-rotate messages
Shows the next message on its own. The carousel waits while the pointer is over it. Shows when Message style is Carousel. On by default.
Rotation speed
How long each message stays. A longer message stays longer, from 3 to 15 seconds. Fast shortens that time and Slow lengthens it. Normal is the default. Shows when Auto-rotate messages is on.
Show messages on mobile
Turn it off to hide the messages on screens narrower than 768 px. The menu button and the selectors stay. If the bar has nothing else to show, the whole bar hides on those screens. On by default.
On screens narrower than 768 px, the messages take the first row of the bar, and the menu button and the selectors share a second row under them.
Navigation
Show menu button puts a button with three lines at the left end of the bar. It opens the Offcanvas drawer section, a side menu that slides in from the left. It is on by default. With it off, customers can open the drawer only from a link to #OffcanvasDrawer elsewhere on the page. Add a side menu walks through filling the drawer.
Header icons
These controls sit at the right end of the bar.
Setting
What it does
Language selector
A list that switches the store's language. It shows only when your store has more than one published language. On by default.
Country and currency selector
A list that switches the country and the currency. It shows only when your store sells to more than one country. On by default.
Light/dark mode toggle
A sun or moon button that switches the store between light and dark colors. It shows only when Color mode is Auto in Color settings. Off by default.
Add language and country selectors explains what your store needs for the selectors to appear. The Header section has its own Light/dark mode toggle, so you can show the switch in one place or both.
When the bar hides
The bar does not show when no message has text, Show menu button is off, and both selectors and Light/dark mode toggle are off. A selector left on keeps the bar in place, even when your store has only one language and one country. In that case the bar shows as an empty strip. To remove the bar, hide or remove the Announcement bar section in the editor sidebar.
The Announcement bar section is the thin bar above the header. It shows short messages, such as a discount code or a shipping offer, and it can also hold a menu button, language and country selectors, and a light/dark switch. It shows on every page. In the editor sidebar, it is the first section under Header. If you removed it, click Add section under Header and select Announcement bar.
The bar uses your palette's primary color as its background, black in the default palette, so it stands out from the page. Color settings sets that color.
Messages
Each message is an Announcement block. To add one, click Add block in the Announcement bar section and select Announcement. A block with an empty Text does not show.
Setting
What it does
Text
The message. Bold text shows in capital letters. In a message with a link, bold text also shows in the accent gradient from Color settings.
Link
Turns the whole message into a link. The message is underlined when the pointer is over it.
These settings apply to all messages:
Setting
What it does
Bar style
Floating (default) shows the bar as a box with rounded corners and a small gap around it. Full runs the bar from one edge of the screen to the other.
Message style
Carousel (default) shows one message at a time in the middle of the bar, with an arrow on each side when there are two or more. Marquee scrolls all the messages across the bar in one continuous line.
Auto-rotate messages
Shows the next message on its own. The carousel waits while the pointer is over it. Shows when Message style is Carousel. On by default.
Rotation speed
How long each message stays. A longer message stays longer, from 3 to 15 seconds. Fast shortens that time and Slow lengthens it. Normal is the default. Shows when Auto-rotate messages is on.
Show messages on mobile
Turn it off to hide the messages on screens narrower than 768 px. The menu button and the selectors stay. If the bar has nothing else to show, the whole bar hides on those screens. On by default.
On screens narrower than 768 px, the messages take the first row of the bar, and the menu button and the selectors share a second row under them.
Navigation
Show menu button puts a button with three lines at the left end of the bar. It opens the Offcanvas drawer section, a side menu that slides in from the left. It is on by default. With it off, customers can open the drawer only from a link to
#OffcanvasDrawerelsewhere on the page. Add a side menu walks through filling the drawer.Header icons
These controls sit at the right end of the bar.
Setting
What it does
Language selector
A list that switches the store's language. It shows only when your store has more than one published language. On by default.
Country and currency selector
A list that switches the country and the currency. It shows only when your store sells to more than one country. On by default.
Light/dark mode toggle
A sun or moon button that switches the store between light and dark colors. It shows only when Color mode is Auto in Color settings. Off by default.
Add language and country selectors explains what your store needs for the selectors to appear. The Header section has its own Light/dark mode toggle, so you can show the switch in one place or both.
When the bar hides
The bar does not show when no message has text, Show menu button is off, and both selectors and Light/dark mode toggle are off. A selector left on keeps the bar in place, even when your store has only one language and one country. In that case the bar shows as an empty strip. To remove the bar, hide or remove the Announcement bar section in the editor sidebar.