How to Add a Sticky Add to Cart Bar on Shopify

2026-09-14 · upselling

A sticky add to cart bar is the single highest-leverage change most Shopify stores can make in an afternoon. It keeps the buy button pinned to the screen as shoppers scroll, so the decision to purchase never requires scrolling back up to find it. This guide covers two ways to add one — an app or theme code — plus how to style, test, and avoid the mistakes that make sticky bars annoying instead of useful.

What Is a Sticky Add to Cart Bar (and Why It Works on Low-Traffic Stores)

A sticky add to cart bar is a slim strip that appears at the bottom (or top) of a product page once the shopper scrolls past the theme's original Add to Cart button. It usually contains a small product thumbnail, the product title, the price, and a button. On mobile it's typically full-width; on desktop it's often a centered or right-aligned bar.

The mechanism is simple: on a long product page — description, specs, reviews, FAQ — the buy button scrolls out of view. On mobile, where product pages are longest relative to screen height and shoppers scroll fast, that's a real problem. A sticky bar removes the need to scroll back, and it keeps price and product confirmation in front of the shopper at the moment they decide.

Why this matters more for low-traffic stores: you can't fix a 1% conversion rate by buying more traffic. You fix it by removing friction for the visitors you already have. A sticky bar is a contained, measurable change that affects every product page view, and it doesn't require new ad spend to show results.

Two caveats before you start:

• Don't show it above the fold. The bar should appear only after the shopper scrolls past the original button, not on page load. Otherwise you have two competing buy buttons, which reads as clutter.
• Don't use it on products with variants that need selecting. If the shopper hasn't picked a size or color, a sticky "Add to Cart" button either fails or adds the wrong variant. Handle this with variant-aware logic (see the mistakes section) or skip the bar on those products.

Option 1: Add a Sticky Add to Cart Bar With a Shopify App

This is the fastest route and the right one if you don't want to touch Liquid. Most of these apps install a bar via the theme editor or an app embed, so you can preview it without publishing.

Apps worth evaluating in the Shopify App Store:

• Sticky Add To Cart by Webyze — a long-standing, single-purpose sticky bar app with a free tier.
• Essential: Sticky Add To Cart — part of a broader conversion app suite; useful if you also want free shipping bars or timers.
• Releasit and Upcart — cart-drawer and cart-upsell tools that include a sticky add-to-cart element; better if you want the bar to feed into a cart drawer rather than a page reload.

Check current pricing and free-plan limits on each app listing before installing — they change, and some free tiers cap monthly page views.

Typical setup flow:

1. Install the app and open its settings from Apps in your Shopify admin.
2. Choose where the bar appears — usually "product pages only" is the right default.
3. Pick the trigger: scroll past the original button is standard; a fixed delay also works but is less predictable.
4. Map the elements: product image, title, price, quantity selector, button label.
5. Match colors and fonts to your theme, then preview on both mobile and desktop.
6. Enable the app embed in Online Store → Themes → Customize → App embeds if the app requires it.

The tradeoff: apps add a script to every product page and can slow load times slightly. Test your page speed after installing (Shopify's own speed report or PageSpeed Insights) and remove the app if the bar costs you more in load time than it earns in conversions.

Option 2: Add a Sticky Add to Cart Bar Without an App (Theme Code)

This keeps your store lean and gives you full control, at the cost of editing Liquid. Always duplicate your theme first (Online Store → Themes → Actions → Duplicate) and work on the copy.

The approach: add a hidden bar to your product template, then reveal it with JavaScript once the shopper scrolls past the main button.

In your product template (usually sections/main-product.liquid or templates/product.liquid), add a bar near the end of the section:

<div id="sticky-atc" class="sticky-atc" aria-hidden="true">
  <img src="{{ product.featured_image | image_url: width: 80 }}" alt="{{ product.title | escape }}" width="40" height="40">
  <span class="sticky-atc__title">{{ product.title | escape }}</span>
  <span class="sticky-atc__price">{{ product.selected_or_first_available_variant.price | money }}</span>
  <button type="button" class="sticky-atc__button" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    Add to cart
  </button>
</div>

Then the CSS and JS. Put the CSS in your theme's stylesheet or a {% style %} block:

.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  z-index: 50;
}
.sticky-atc.is-visible { display: flex; }
.sticky-atc__button { margin-left: auto; }

document.addEventListener('DOMContentLoaded', function () {
  const bar = document.getElementById('sticky-atc');
  const mainButton = document.querySelector('[name="add"]');
  if (!bar || !mainButton) return;

  const observer = new IntersectionObserver(function (entries) {
    bar.classList.toggle('is-visible', !entries[0].isIntersecting);
    bar.setAttribute('aria-hidden', entries[0].isIntersecting);
  }, { threshold: 0 });

  observer.observe(mainButton);
});

For the button to actually add the product, either submit the existing product form or call the Cart API:

bar.querySelector('.sticky-atc__button').addEventListener('click', function () {
  const id = this.dataset.variantId;
  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(id), quantity: 1 }] })
  }).then(() => { /* open cart drawer or redirect to /cart */ });
});

If your theme uses a cart drawer, trigger its open function instead of redirecting. If you use Dawn or another Online Store 2.0 theme, your variant selection lives in a <variant-selects> element — listen for its change event and update data-variant-id and the displayed price, or the bar will add the wrong variant.

How to Style and Position Your Sticky Bar for Mobile and Desktop

The bar has one job: be tappable and unambiguous. Everything else is secondary.

• Mobile: full width, anchored to the bottom, minimum 44px tap target for the button. Account for iOS safe areas with padding-bottom: env(safe-area-inset-bottom). Keep the bar under about 64px tall so it doesn't eat the viewport.
• Desktop: a bottom bar is fine, but many stores use a narrower centered bar or a right-aligned version so it doesn't compete with chat widgets. If you run a chat bubble in the bottom-right, move the bar to the bottom-left or raise the chat widget.
• Always: high-contrast button color that matches your primary CTA, product thumbnail small enough to not crowd the title, and price visible — hiding the price forces a scroll back up, defeating the purpose.
• Respect other overlays: cookie banners, newsletter popups, and chat widgets all live in the same screen space. Decide the stacking order deliberately.

Testing Your Sticky Add to Cart Bar Before You Go Live

Run through this list on a duplicate theme or on a hidden product before publishing:

• Scroll down and back up — does the bar appear and disappear at the right moment?
• Tap the button on a real phone, not just a resized browser window. Confirm the tap registers and the correct variant is added.
• Test a product with variants: select a size, then use the sticky button. Does it add the size you selected?
• Test a sold-out product and a product with only one variant.
• Add to cart, then check the cart page or drawer shows the right item and quantity.
• Run PageSpeed Insights before and after to confirm the bar didn't wreck your load time.
• Check the bar doesn't cover your footer's last links or your "back to top" button.

Common Mistakes That Kill Conversions (and How to Avoid Them)

• Showing the bar on page load. Two visible Add to Cart buttons at once looks broken. Trigger on scroll past the original button.
• Ignoring variant selection. The most common code-level failure. Bind the bar to the theme's variant state, not to product.selected_or_first_available_variant at page load.
• Making the bar too tall. Anything over roughly 70px on mobile starts to feel like a wall. Trim the title if needed.
• Hiding the price. Shoppers who can't see the price tap the button expecting a surprise. Show it.
• Using a low-contrast button. If the button blends into the bar, it's decoration, not a CTA.
• Forgetting the cart drawer. If your theme opens a drawer, a bar that redirects to /cart creates an inconsistent, jarring experience.
• Not excluding sold-out products. A sticky "Add to Cart" on an unavailable item is a dead end. Show "Sold out" or hide the bar.

Which Option Should You Choose? A Quick Comparison

If you're on a deadline or don't want to touch code, install an app, verify it handles variants correctly, and move on. If you already customize your theme and want no extra scripts, the code route is cleaner long-term.

Conclusion

A sticky add to cart bar is a small, contained change that removes a real point of friction on every product page view — which is exactly the kind of fix a low-traffic store should prioritize over buying more visitors. Pick the app route if you want it live today, or the code route if you want full control and no extra scripts. Either way, test it on a real phone with a real variant product before you publish.

FAQ

Will a sticky add to cart bar slow down my Shopify store? The code version adds almost nothing — a small CSS block and a few lines of JavaScript. Apps inject a script on product pages, so page speed can be affected. Measure with PageSpeed Insights before and after, and remove the app if the load-time cost outweighs the gain.

Does a sticky bar work if my products have size or color variants? Yes, but only if it's variant-aware. The bar must update when the shopper selects a variant, otherwise it adds the default variant. Apps usually handle this; with custom code you need to listen for the theme's variant change event and update the button's variant ID.

Should the sticky bar appear on collection pages or only product pages? Product pages only. On collection pages there's no single product to add, and a generic bar creates confusion. If you want a persistent element on collection pages, a free shipping threshold bar is a better fit.