How to add a sticky add to cart bar in Shopify (no app)

A sticky add to cart bar is the slim strip that follows the shopper down a long product page with the product name, price, and an Add to cart button always in reach. On mobile especially, where the real button is buried far below the fold, it removes the "scroll all the way back up to buy" friction. Done right it is a genuine conversion lift, and it is a few lines of Liquid plus a tiny bit of JavaScript.

The key is to build it on the real product form, not a fake button, so variants, sold-out states, and the cart all keep working. Here is the whole thing.

The markup

Create snippets/sticky-atc.liquid and render it once on the product template. It uses Shopify's own {% form 'product' %}, which is what makes the button real, posting to /cart/add exactly like the main one.

1{% assign current_variant = product.selected_or_first_available_variant %}2 3<div class="sticky-atc" data-sticky-atc hidden>4  <div class="sticky-atc__info">5    {{ product.featured_image | image_url: width: 96 | image_tag: alt: product.title, class: 'sticky-atc__img' }}6    <div>7      <p class="sticky-atc__title">{{ product.title }}</p>8      <p class="sticky-atc__price">{{ current_variant.price | money }}</p>9    </div>10  </div>11 12  {% form 'product', product %}13    <input type="hidden" name="id" value="{{ current_variant.id }}">14    <button type="submit" class="sticky-atc__btn" {% unless product.available %}disabled{% endunless %}>15      {% if product.available %}Add to cart{% else %}Sold out{% endif %}16    </button>17  {% endform %}18</div>

• {% form 'product', product %} renders Shopify's real product form. The form tag wires the submit to the cart for you, so you do not hand-roll a fetch.
• The hidden id input carries current_variant.id so the right variant is added. On a multi-variant product, sync this with the main picker (see the note below).
• hidden on the wrapper keeps the bar out of the layout until JavaScript reveals it, and {% unless product.available %}disabled{% endunless %} mirrors the sold-out state so you never offer a buy button for an out-of-stock item.

Reveal it only when the main button leaves the screen

A sticky bar that is always visible is annoying and competes with the real button. The right behaviour is: show it only once the main add to cart button has scrolled out of view. The modern, performant way to detect that is an IntersectionObserver, no scroll-event math, no jank.

1const bar = document.querySelector('[data-sticky-atc]');2const mainButton = document.querySelector('product-form button[type="submit"], .product-form__submit');3 4if (bar && mainButton) {5  const observer = new IntersectionObserver(([entry]) => {6    // Show the sticky bar when the real button is NOT on screen.7    bar.hidden = entry.isIntersecting;8  }, { threshold: 0 });9 10  observer.observe(mainButton);11}

Styling: pin it to the bottom

1.sticky-atc {2  position: fixed;3  inset: auto 0 0 0;4  z-index: 20;5  display: flex;6  align-items: center;7  justify-content: space-between;8  gap: 1rem;9  padding: 0.75rem 1rem;10  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));11  background: #fff;12  border-top: 1px solid rgba(0, 0, 0, 0.08);13  box-shadow: 0 -6px 24px -12px rgba(0, 0, 0, 0.25);14}15.sticky-atc__info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }16.sticky-atc__img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }17.sticky-atc__title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }18.sticky-atc__price { font-size: 0.85rem; opacity: 0.7; }19.sticky-atc__btn { flex: none; padding: 0.85rem 1.5rem; border: 0; border-radius: 10px; background: #1c1a17; color: #fff; font-weight: 600; }20.sticky-atc__btn[disabled] { opacity: 0.5; }

Keeping the variant in sync

For a single-variant product you are done. For multi-variant products, the sticky bar should add whatever the shopper selected in the main picker. Listen for the theme's variant-change event and update the hidden id input (and the price) on the sticky bar. Most Online Store 2.0 themes publish a variant-change event you can subscribe to, the same hook covered in the from-price for multi-variant products walkthrough.

What AI tools get wrong here

• Faking the button with a custom fetch('/cart/add.js') instead of using {% form 'product' %}, which drops variant handling, error states, and theme cart integration.
• Listening to scroll events and recomputing positions on every pixel, instead of an IntersectionObserver. It works until the page is long and the phone is cheap.
• Always-on visibility, so the bar covers content and fights the real button instead of appearing only when it is actually useful.

Wrapping up

Build it on the real product form, reveal it with an IntersectionObserver, pin it with a safe-area-aware bottom bar, and keep the variant in sync. That is a sticky add to cart that actually converts, and behaves like part of the theme instead of an app bolt-on. Pair it with a sold-out badge and a free shipping bar for a product page that sells.