Does this work on Online Store 2.0 / Horizon?

Yes. The IntersectionObserver pattern is theme-agnostic. The only theme-specific bit is the `variant:change` event in step 3, Horizon dispatches it, older themes don't. If your theme doesn't, listen on the variant select's `change` event instead.

Should I add the sticky bar to every PDP layout?

Yes. If a merchant has multiple product templates (e.g. one for normal products, one for subscriptions), render the snippet in each. Or render it in the layout file so it's global; just guard it with `{% if template contains 'product' %}` so it doesn't show on non-product pages.

Why use a sentinel element instead of observing the buy button directly?

You can observe the buy button directly. The sentinel is just a separate div for clarity, makes it obvious to a future developer reading the template what's going on. Observing the button works fine too.

Build a Shopify sticky add-to-cart bar

When the main buy button scrolls off screen, a slim sticky bar slides up from the bottom with the product, variant, and a buy button. Increases mobile conversion meaningfully with about 30 lines of code.

On mobile, the product page is a long scroll: hero, gallery, description, reviews, related products. By the time a shopper hits 'I want this,' the buy button is somewhere 1,500 pixels above them. They have to scroll back to add to cart, which is the moment a meaningful chunk of them just bail. A sticky add-to-cart bar removes that friction entirely.

The trick is to NOT show the bar while the main buy button is in view (it would be redundant and visually noisy). We only show it once the main button has scrolled past, which is what IntersectionObserver was designed for.

northwindcoffee.myshopify.com

What you'll have at the end. Slim bar pinned to the bottom, appears only after the main buy button scrolls out of view.

Step 1

Add a sentinel element near the main buy button

We need something to observe. Add an empty <div> just below the main add-to-cart button on your product template:

sections/main-product.liquid (or your buy block)

1<button type="submit" name="add" class="product-form__add">Add to cart</button>2 3{% comment %} Sentinel for the sticky bar to track when the main button is in view. {% endcomment %}4<div data-sticky-atc-sentinel aria-hidden="true"></div>

Step 2

Build the sticky bar snippet

The bar mirrors the main form's product/variant so they stay in sync. Render it once, near the bottom of the product template:

snippets/sticky-atc.liquid

1{% liquid2  assign current_variant = product.selected_or_first_available_variant3%}4 5<div class="sticky-atc" data-sticky-atc aria-hidden="true">6  <a href="{{ product.url }}" class="sticky-atc__img" tabindex="-1">7    {{ product.featured_image | image_url: width: 80 | image_tag: loading: 'lazy', widths: '40,80' }}8  </a>9  <div class="sticky-atc__meta">10    <h3 class="sticky-atc__title">{{ product.title }}</h3>11    <p class="sticky-atc__sub">12      {% unless product.has_only_default_variant %}13        <span data-sticky-atc-variant>{{ current_variant.title }}</span> ·14      {% endunless %}15      <span data-sticky-atc-price>{{ current_variant.price | money }}</span>16    </p>17  </div>18  <form action="/cart/add" method="post" enctype="multipart/form-data" data-sticky-atc-form>19    <input type="hidden" name="id" value="{{ current_variant.id }}" data-sticky-atc-id>20    <button type="submit" class="sticky-atc__buy" {% unless current_variant.available %}disabled{% endunless %}>21      {% if current_variant.available %}Add to cart{% else %}Sold out{% endif %}22    </button>23  </form>24</div>25 26{% stylesheet %}27  .sticky-atc {28    position: fixed; bottom: 0; left: 0; right: 0;29    background: rgb(var(--color-background, 255 255 255));30    border-top: 1px solid rgb(var(--color-foreground, 0 0 0) / 0.08);31    box-shadow: 0 -8px 20px rgb(0 0 0 / 0.06);32    padding: 12px 16px;33    display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;34    transform: translateY(100%);35    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);36    z-index: 50;37  }38  .sticky-atc[aria-hidden="false"] { transform: translateY(0); }39  .sticky-atc__img img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: block; }40  .sticky-atc__title { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.2; }41  .sticky-atc__sub { margin: 2px 0 0 0; font-size: 11.5px; color: rgb(var(--color-foreground, 0 0 0) / 0.6); }42  .sticky-atc__buy {43    background: rgb(var(--color-foreground, 0 0 0));44    color: rgb(var(--color-background, 255 255 255));45    border: 0; padding: 10px 16px; border-radius: 6px;46    font-size: 13px; font-weight: 600; cursor: pointer;47  }48  .sticky-atc__buy:disabled { opacity: 0.5; cursor: not-allowed; }49{% endstylesheet %}

Step 3

Hook up the show/hide observer

assets/sticky-atc.js

1(() => {2  const bar = document.querySelector('[data-sticky-atc]');3  const sentinel = document.querySelector('[data-sticky-atc-sentinel]');4  if (!bar || !sentinel) return;5 6  const observer = new IntersectionObserver(7    (entries) => {8      const inView = entries[0].isIntersecting;9      // Show the bar when the main buy button has SCROLLED PAST (not in view).10      bar.setAttribute('aria-hidden', inView ? 'true' : 'false');11    },12    { rootMargin: '0px 0px -10% 0px' },13  );14  observer.observe(sentinel);15 16  // Keep the sticky form's variant id in sync if the main form17  // changes variants (e.g. user picks 'Beans (whole)' vs 'Ground').18  document.addEventListener('variant:change', (e) => {19    const variant = e.detail?.variant;20    if (!variant) return;21    bar.querySelector('[data-sticky-atc-id]').value = variant.id;22    bar.querySelector('[data-sticky-atc-price]').textContent = variant.price_formatted;23    const variantEl = bar.querySelector('[data-sticky-atc-variant]');24    if (variantEl) variantEl.textContent = variant.title;25    const buy = bar.querySelector('.sticky-atc__buy');26    buy.disabled = !variant.available;27    buy.textContent = variant.available ? 'Add to cart' : 'Sold out';28  });29})();

About the `variant:change` event

Horizon's variant-picker dispatches a custom event when the user picks a variant. Older themes don't, so check what your theme exposes. Worst case: subscribe to the change event on the main form's variant <input> and read the new id from there.

Step 4

Render it on the product template

sections/main-product.liquid (near the bottom)

1{% render 'sticky-atc', product: product %}2 3<script src="{{ 'sticky-atc.js' | asset_url }}" defer></script>

Step 5

Test on mobile

Scroll a product page on a real phone. The bar should slide up after the main buy button leaves the viewport, and slide back down if you scroll up enough to bring the main button back in view.
Change the variant: the bar's price and add-to-cart button state should update immediately.
Tap the bar's buy button: should add to cart (and, if you have the cart drawer from the other project, open the drawer).
Make sure the bar isn't covering anything critical on the product page. Add padding-bottom: 80px to the product template so the last content is reachable.

Don't enable this on desktop without thinking about it

On desktop, the buy button is usually visible because the layout is two-column. Showing a sticky bar AND a visible main button is redundant. Wrap the snippet render in a {% if request.design_mode or template == 'product' %} check that also reads a viewport hint, OR hide the bar via CSS at min-width: 900px. I default to mobile-only.