Bars (top and bottom banners)
A bar is a full-width widget at the top or bottom of the page, also called an announcement bar, notification bar or banner. It stays out of the way of the content, which makes it the usual choice for free-shipping messages, sitewide sales, countdowns and shipping cut-off notices.
Available on: all platforms.
How it works
You choose Position (Top or Bottom). Top bars also have a Behavior that decides how the bar and your page share the space:
Position and behavior | What the visitor sees | When the visitor scrolls |
|---|---|---|
Top, Fixed | The page moves down to make room for the bar. Fixed and sticky headers move down below it | The bar stays at the top of the screen, and headers stay below it |
Top, Static | The page moves down to make room for the bar | The bar scrolls away with the page. Fixed headers follow it up until they're back at the top of the screen |
Top, Fixed and on top | The bar covers the top of the page; nothing moves | The bar stays at the top of the screen, over your content |
Bottom | The bar covers the bottom of the page | The bar stays at the bottom of the screen |
With Fixed and Static, the space follows the bar's height: if the bar's content wraps to more lines on a narrow screen, the page and headers move accordingly. When the bar closes, the page and headers return to their original position.
Configuration
Option | What it does | Values / default |
|---|---|---|
Position | Top or bottom of the page | Top, Bottom |
Behavior | How a top bar shares space with the page (see above) | Fixed (default for top), Static, Fixed and on top |
Animation | How the bar appears | None, Fade, Slide down (top bars), Slide up (bottom bars). Changing the position resets it to the matching slide |
Duration | Animation length | 0.1–2 s, default 0.25 s |
Close on Esc | Closes the bar when the visitor presses Esc | On |
Height | Bar height | Auto (fits content) |
Overflow | What happens to content taller than the bar | Default auto |
Background, border, radius, shadow | Bar surface | Bars start with no corners, border or shadow |
Close button
Bars have one extra close button setting, Align: Top or Middle (vertically centered, the default for new bars). See Widget display options for the other close button options.
Behavior details and limitations
- No teaser and no backdrop. Bars can't be minimized to a teaser. Use a callout if you need that.
- Header handling works with most themes. Elements that are fixed or sticky to the top of the screen are moved down while a Fixed bar is open, and while a Static bar is still in view.
- Bottom bars can cover floating buttons. Chat bubbles, cookie banners and sticky add-to-cart buttons at the bottom of the screen may sit under or over the bar. Test on mobile.
- Bars appear above page content when they open. With Fixed and on top and Bottom, the bar covers whatever is underneath it.
- One bar per edge. Two top bars open at the same time stack unpredictably. Use a Widget interaction rule ("Don't show if a bar is already open"), or test messages as variations of one bar.
Examples
- Free-shipping progress bar: a top Fixed bar with a cart progress element, triggered on landing, on all pages except checkout.
- Sale countdown: a top Static bar with a countdown timer and a Timeframe rule for the sale hours.
- Mobile app promotion: a Bottom bar on phones only, using a Target with a device filter, with a close button aligned to the middle.
Troubleshooting
- The bar covers my header → the header isn't detected as fixed or sticky, or the behavior is Fixed and on top. Switch to Fixed, or add top spacing in the widget's custom CSS.
- Content jumps when the bar opens → expected with Fixed and Static, which push the page down. Use Fixed and on top or a Bottom bar to avoid moving content.