How to Add a Sticky Add-to-Cart Bar to Shopify (No App Required)

On a long product page — especially on mobile — your Add to Cart button scrolls out of view fast. The customer reads the description, looks at reviews, checks the size guide… and now the buy button is three screens away. A sticky add-to-cart bar fixes that: a slim bar that slides in with the product name, price and a buy button the moment the real button leaves the screen. It's one of the highest-ROI mobile tweaks you can make, and you don't need a $10/month app for it.

This tutorial shows how it works and the technique behind it. For the complete, copy-paste version with the styling and variant handling already done, grab the snippet below.

What you'll build

• A fixed bar (bottom on mobile, your choice on desktop) showing the product title, current price and an Add to Cart button.
• It appears only when the real Add to Cart button is out of view, so it never competes with the main one.
• It respects the selected variant and price — no stale info.
• Pure HTML, CSS and a few lines of vanilla JavaScript. No app, no external scripts.

The technique: watch the real button

The trick that makes a sticky bar feel right is when it appears. The clean way to do that is an IntersectionObserver watching your theme's real Add to Cart button. When that button scrolls off-screen, show the sticky bar; when it scrolls back into view, hide it. That's far smoother and cheaper than listening to every scroll event.

const realBtn = document.querySelector('[name="add"], .product-form__submit');
const stickyBar = document.querySelector('.sticky-atc');

const io = new IntersectionObserver(([entry]) => {
  stickyBar.classList.toggle('is-visible', !entry.isIntersecting);
}, { rootMargin: '0px 0px -60px 0px' });

if (realBtn) io.observe(realBtn);

When the customer taps the sticky bar's button, you either submit the product form or post to /cart/add.js so it works with any theme's cart drawer. The Sticky Add to Cart snippet wires this up for you and keeps the price in sync when the shopper changes variant.

Where to put the code

Add the markup and script inside your product template (or as a snippet you render from it), so it only loads on product pages. Keep the bar's markup close to the product form so it has access to the variant data your theme already renders. The full snippet includes the exact placement notes for OS 2.0 themes.

Getting the details right

• Mobile first. This bar earns its keep on phones. Pin it to the bottom, keep it thin, and make the tap target big.
• Don't double up. Hide it whenever the real button is visible so customers never see two identical buttons.
• Match the variant. If your product has options, update the sticky price and the add action when the selection changes.
• Mind the safe area. On iPhones, add padding-bottom: env(safe-area-inset-bottom) so the bar clears the home indicator.

Does a sticky Add-to-Cart bar actually help?

For most stores, yes — particularly on mobile, where the majority of Shopify traffic now is. Keeping the buy action one tap away throughout a long page removes friction at the exact moment intent is highest. As with any conversion tweak, add it, then watch your product-page behaviour to confirm it's helping rather than assuming.