How to make a sticky announcement bar on Shopify

What a sticky bar does

A normal announcement bar sits at the top of the page and scrolls away as soon as the shopper moves down. A sticky bar stays pinned to the top of the screen, so the message is still visible on a long product page or collection grid.

That's useful when the message matters throughout the visit: a sale that ends today, a free shipping threshold, or a code shoppers need at checkout. For a one-time notice that shoppers only need to read once, a non-sticky bar takes up less room.

Sticky headers vs sticky announcement bars

Many Shopify themes have a sticky header setting in the theme editor that keeps the logo and menu fixed while scrolling. Whether the theme's own announcement bar stays fixed with it depends on the theme; in some themes only the header sticks and the announcement bar scrolls away. See Customizing themes to find your header settings.

Step by step: make a bar sticky

1. Open or create a bar

   In Announcement bar, open an existing bar or click New announcement and fill in the Content tab.

2. Go to Design

   Click Continue to Design.

3. Choose the top

   Under Positioning, set Position to Top page.

4. Tick Sticky bar

   Tick Sticky bar. It only appears for Top page bars.

5. Keep it compact

   In Card, reduce Padding (Top and Bottom) so the bar takes up less height while it follows the shopper.

6. Save and check

   Click Save (or Publish for a new bar), open your storefront and scroll down a long page.

Settings and how stacking works

Several bars at the top

When more than one bar is live at the top, they stack in the order you created them. If any bar in the top stack is sticky, the whole top stack stays fixed while scrolling. Two stacked sticky bars plus a sticky theme header can take up a lot of a phone screen, so consider combining messages into one rotating bar.

Keeping a sticky bar slim

A Multiple rotating announcements bar keeps the height of its tallest slide, so a sticky rotating bar doesn't change height as the slides change.

Example: a sticky last-day sale bar

• Title: "Last day: 30% off all outerwear"
• Call to action: Make entire bar clickable, Link /collections/outerwear
• Position: Top page, Sticky bar ticked
• Card: Padding Top and Bottom set low, the Fire template
• Placement: Every page, with Cart excluded so the cart stays uncluttered
• Scheduling: Ends on a Specific date at midnight on the last day

If the sticky bar doesn't behave as expected

• The page moves down when the bar loads: that's intended. When a top bar is sticky, the app adds space at the top of the page equal to the bar's height, so the bar doesn't cover your header. When a shopper closes the bar, that space shrinks to match.
• The theme header slides under the bar: the sticky bar is pinned to the very top of the window, above other page content. If your theme's header is also fixed to the top, part of it can end up underneath the bar in some themes. Turning off one of the two sticky options usually solves it.
• A bar sticks that you didn't make sticky: if any bar in the top stack has Sticky bar ticked, the whole stack is fixed. Untick it on every top bar to stop the stack sticking.
• The bar has disappeared after testing: if you closed it, it stays hidden in your browser for 7 days. Check in a private window.

Tips and common mistakes

• Can't find Sticky bar? It's hidden when Position is Bottom page. Switch to Top page.
• Bar overlaps the header: if your theme also has a sticky header, check a few pages on desktop and phone after publishing. If it feels crowded, turn off one of the two sticky options.
• Give shoppers a way out: a close icon on a sticky bar is considerate, especially on small screens.
• Watch Dismissals: a high number of Dismissals in Analytics may mean the bar is in the way.

Frequently asked questions