Announcement bar
A slim bar above the header for one message, three benefits or a moving line of them.
munich-demo.myshopify.com
What it does
A bar above the header, in its own color scheme. In Single message layout it shows one block, usually a text or a key point. In Three benefits layout it shows three key points side by side on desktop and rotates through them on a phone. In Marquee layout all blocks run as one continuous moving line.
When to use it
For the one thing every visitor should know before they read anything else: free shipping, a guarantee, a launch date. Not for navigation and not for long text. If you have more than three points to make, the Marquee section under the hero is the better place.
Blocks
- Key point: a short line with an optional icon in front.
- Text: a formatted line, for a message with a link in it.
- Menu: a row of links, for a secondary navigation such as Help and Contact.
Setting it up
- Pick a Color scheme. The demo uses the dark scheme so the bar reads as a frame.
- Choose Layout. For Three benefits, add exactly three Key point blocks.
- Write the points, pick an icon for each.
Settings
| Setting | Type | What it does |
|---|---|---|
| General | ||
| Color scheme | Color scheme | The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors. |
| Width | Select | Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width |
| Layout | Select | Single message shows one block. Three benefits shows three Key point blocks side by side, and rotates through them on a phone. Marquee runs all blocks as a moving line.Options: Single message, Three benefits, Marquee · Default: Single message |
Key point block
| Setting | Type | What it does |
|---|---|---|
| Text | Text | A short line, five words or fewer, such as a shipping promise or a certification.Default: Free shipping on orders over 50 |
| Icon | Select | The small icon in front of the text. None for a plain line.Options: None, Shipping, Returns, Guarantee, Delivery time, Natural, Gift, Secure payment, Check, Star · Default: Shipping |
| Alignment | Select | Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit |
Text block
| Setting | Type | What it does |
|---|---|---|
| Text | Rich text | A short line, five words or fewer, such as a shipping promise or a certification.Default: <p>Use this text to explain the product, the story, or the promise behind it.</p> |
| Size | Select | Large for a lead paragraph, Medium for body copy, Small for fine print.Options: Large, Medium, Small · Default: Medium |
| Alignment | Select | Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit |
Menu block
| Setting | Type | What it does |
|---|---|---|
| Width | Select | How many footer columns the block takes up.Options: 1 column, 2 columns · Default: 1 column |
| Layout | Select | Single message shows one block. Three benefits shows three Key point blocks side by side, and rotates through them on a phone. Marquee runs all blocks as a moving line.Options: Column with a heading, Row of links · Default: Column with a heading |
| Heading | Text | The title above the links.Default: Shop |
| Menu | Menu | Which menu from Online Store, Navigation to show. Only the first level is used.Default: footer |
This section also accepts app blocks, so apps that provide one can add content here.
Tips
- Three benefits stacks on a phone would take three lines, so the bar shows one benefit at a time there and rotates through them. Nothing to configure.
- Write each key point in five words or fewer. The bar is one line tall and does not wrap.
- The bar is part of the header group and appears on every page. Turn it off for a page by hiding the whole section; it has no per page setting.
- Marquee here uses the speed from Theme settings, Animations. The Marquee section has its own speed.