How do you add a sticky add-to-cart bar on Shopify?

A sticky add-to-cart bar pins the product title, price, and buy button to the top or bottom of the screen once the shopper scrolls past the main buy button. Some themes include one as a section you can enable in the theme editor. If yours does not, a small custom snippet or a lightweight app adds it. The bar works best on long product pages where the buy button scrolls out of view.

Why the buy button disappears, and why it matters

On a long product page, the main buy button sits near the top, and everything below it, reviews, details, shipping info, related products, is below the fold. A shopper who reads three sections of content and decides to buy has to scroll all the way back up to act on that decision. Every scroll-back is a chance to leave. A sticky bar removes the trip: the buy action follows the shopper down the page.

This matters most on mobile, where product pages are longest and the thumb zone favors the bottom of the screen. A bottom-anchored sticky bar sits exactly where the thumb rests, which is why mobile conversion responds to it more than desktop does.

Option one: enable the theme's built-in bar

Check your theme first. In the theme editor, open the product template and look for a section or setting called "sticky add to cart," "sticky buy button," or similar, often under the product information section or as a standalone section. Dawn-based themes and many paid themes include it natively. Enable it, choose top or bottom placement, and you are done with no code.

The built-in version is the best option when it exists: it matches your theme's styling, respects variant selection, and adds no extra JavaScript. Test it with a product that has variants, because the bar must update the price and selected options in sync with the main form. A bar that adds the wrong variant to the cart is worse than no bar.

Option two: a small custom snippet

If your theme has no built-in bar, a lightweight snippet does the job. The pattern is simple: a fixed-position bar containing the product title, price, variant selector, and an add-to-cart button, hidden until the shopper scrolls past the main buy button, then revealed. Keep the snippet lean: listen to scroll position, toggle a class, and reuse the existing product form's variant logic rather than duplicating it.

The two rules for a custom bar: it must share state with the main product form, and it must not fight the mobile keyboard or the cookie banner for screen space. A bottom bar that covers the variant picker or the checkout button on small screens will cost more conversions than it saves. Test on a real phone, not just a resized browser.

Option three: an app, when you need the extras

Apps make sense when you want behavior a simple bar does not provide: countdown timers, stock scarcity messages, bundle upsells inside the bar, or A/B testing different bar designs. The tradeoff is weight and cost. A sticky bar app adds JavaScript to every product page view, and on a page you are optimizing for speed, that weight needs to earn its place.

If you go the app route, measure before and after. Run the bar for two weeks, compare mobile add-to-cart rate with the bar off, and keep it only if the lift is real. A sticky bar that looks nice but moves no numbers is decoration.

UX rules that keep it helpful instead of annoying

Show the bar only after the main buy button scrolls out of view. A bar that is always visible duplicates the button the shopper can already see and reads as clutter. Include the price and the selected variant in the bar, so shoppers know what they are buying without scrolling back. Keep it dismissible on mobile: a small close control respects the shopper who finds it distracting, and most will not use it.

Do not stack sticky elements. A sticky header, a sticky bar, and a cookie banner can consume a third of a phone screen. If your theme already has a sticky announcement bar or header, prefer a bottom-anchored bar and keep the total sticky chrome under a fifth of the viewport.

Reviewed September 28, 2026.

Does a sticky add-to-cart bar slow down the page?

A built-in or lightweight snippet adds almost nothing. An app can add meaningful JavaScript weight, so measure page speed before and after installing one.

Should the bar appear on desktop too?

It helps most on mobile, where pages are long and thumbs rest at the bottom. On desktop, show it only on long product pages where the buy button scrolls far out of view.