Sticky bar

What is a sticky bar?

A sticky bar is a slim bar pinned to the same screen position — usually the top or bottom — while the rest of the page scrolls past it. Technically it is built with CSS position: sticky or position: fixed. In an online store it keeps a message or an action constantly visible, no matter how far the customer has scrolled down the page.

Why does a sticky bar matter?

A sticky bar gives you a fixed spot for the message you least want customers to miss: a discount code, a free-shipping threshold, or a clear call to action. Because it follows the customer down the page, it works especially well on mobile and on long product pages, where the buy button would otherwise scroll out of view. In return it takes up viewport space, and if it is injected late or without reserved space it can trigger layout shift (CLS).

Common use cases

• Announcement bar with a discount code, campaign, or free-shipping threshold at the top.
• Sticky add-to-cart on mobile, keeping the buy button visible on long product pages.
• Cookie and consent banner pinned until the user makes a choice.
• Countdown or stock notice that adds time pressure during a campaign.
• Persistent search or menu bar inside a pinned header.

Shopify perspective

Most Online Store 2.0 themes ship with a built-in announcement bar section and often a “sticky header” option, but a persistently pinned bar or sticky add-to-cart usually requires theme code or an app. Always test on both mobile and desktop that the bar does not cover important content or checkout buttons, and that it does not push the layout around. A related, less intrusive variant is a slide-in, which glides in from the side instead of occupying a fixed bar.