Shopify

Sticky add to cart on Shopify: how to tell if you need one, and the free theme code that fixes it

Every page ranking for this search tells you how to install a sticky bar. None tells you whether you need one. So: open your store on your phone, go to your newest product, do not scroll. If Add to Cart is on that screen, close this tab. If not, you are one of the 73.5% of 5,858 live Shopify stores we loaded at 390 by 844 whose buy button sits below the fold.

By Misha Gavura · 13 min read · Verified September 17, 2026 against the Dawn and Horizon source repositories, the Shopify Help Center and two live App Store listings. Store numbers are ours, from the audit.

What a sticky add to cart is, and the 30-second phone test

A sticky add to cart is a bar pinned to the bottom of a phone screen carrying the product name, price and an Add to Cart button, shown once the real button scrolls out of view. Shopify has no setting for it, and no free Shopify theme ships one turned on. It comes from an App Store app or a snippet in your theme.

Before installing anything: pick up your phone, leave wifi, open your store the way a stranger arrives, tap through to your newest product, stop. Is Add to Cart on that screen?

If yes, you are done: a bar on a page whose button is already visible adds weight and covers your footer. If no, move the button up first. Drag the buy-buttons block above the description, or cut the mobile gallery to one image. That is free and survives theme updates. The bar is for genuinely long pages.

How many stores hide the add to cart button below the fold

Between June and August 2026 we loaded 5,858 independent Shopify stores in headless Chromium at 390 by 844, opened the first product each store's feed returned, and recorded whether any Add to Cart or Buy button sat inside that screen. On 4,305 of them, 73.5%, none did. Method, intervals and CSV on the audit page.

It is the most common thing wrong with a Shopify product page, ahead of a missing free-shipping line (65.2%) and no reassurance near the price (38.0%). The average store carried 2.76 leaks.

Why it costs anything is older than Shopify. Nielsen Norman Group's 2018 eye-tracking study, 120 participants and over 130,000 fixations, found "users spent about 57% of their page-viewing time above the fold" and that "74% of the viewing time was spent in the first two screenfuls." People scroll now, they just stop paying attention once they do.

Which Shopify themes do it, including Dawn

You can half-predict your own answer from your theme. Same 5,858 stores, theme names appearing at least 30 times.

Dawn hides the button on 273 of its 321 stores. Read that carefully: these are merchant-configured stores classified by a merchant-editable theme name, not stock installs. Nothing in Dawn's code forces the button down. Five lifestyle photos go in, the gallery grows, a trust-badge row lands above the price. Prestige at 44.2% is a paid theme with a tighter mobile layout its buyers leave alone. Every cell is under 385 stores, so predict with it rather than rank with it.

Horizon, Shopify's free flagship and "our new design foundation" on the Editions Summer 2025 page, was not common enough in our sample to clear the 30-store floor. Blogs call it the default theme for new stores; neither the Editions page nor the Theme Store listing says so.

App or theme code: what each one really costs

The two listings ranking for this search: STKY Sticky Add To Cart Bar (4.9 stars, 497 reviews) is free, then $6.99 a month on Shopify Basic, $11.99 on Grow, $18.99 on Advanced. Sticky Add To Cart Bar Pro (4.9, 42 reviews) is free to 500 visitors, then $3, $5 and $10 by band. Neither prints a figure.

The case for the app is the fourth column: theme app extensions "allow merchants to easily add dynamic elements to their themes without having to interact with Liquid templates or code," so that bar survives an update. Against it, a subscription forever for 2 KB of CSS and JavaScript. The case against the code is Shopify's own: "If changes that you've made to a theme's code are incompatible with a theme update, then all your code changes are removed in the updated copy."

The sticky add to cart button Shopify code

Most snippets build a second product form inside the bar, and that is where they go wrong. A duplicate form carries its own variant id, which stops matching the moment a shopper changes a swatch, and it bypasses the JavaScript that opens your cart drawer. This one finds your theme's real button and clicks it.

I checked the selector against source. Dawn's snippets/buy-buttons.liquid renders <button id="ProductSubmitButton-..." type="submit" name="add">; Horizon's snippets/add-to-cart-button.liquid renders the same name="add" button inside an <add-to-cart-component>. Both sit in a {% form 'product' %}, so both give a form whose action contains /cart/add.

Step 1: duplicate, then create snippets/sticky-atc.liquid

Online Store, Themes, the three-dot menu on your live theme, Duplicate. Then edit code on the duplicate, open Snippets, add a snippet named sticky-atc, and paste this in.

{%- comment -%} snippets/sticky-atc.liquid {%- endcomment -%}
{%- if template.name == 'product' and product != blank -%}
<style>
  .spx-bar{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;
    align-items:center;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:#fff;border-top:1px solid rgba(0,0,0,.12);
    transform:translateY(115%);transition:transform .18s ease}
  .spx-bar[data-show="1"]{transform:none}
  .spx-bar__t{flex:1;min-width:0;font-size:14px;line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .spx-bar__p{font-size:14px;font-weight:600;white-space:nowrap}
  .spx-bar__b{flex:0 0 auto;min-height:48px;min-width:140px;padding:0 20px;
    border:0;border-radius:6px;font:inherit;font-weight:600;cursor:pointer;
    background:#111;color:#fff}
  .spx-bar__b[disabled]{opacity:.5;cursor:not-allowed}
  @media(min-width:750px){.spx-bar{display:none}}
  @media(prefers-reduced-motion:reduce){.spx-bar{transition:none}}
  body.spx-pad{padding-bottom:88px}
</style>

<div class="spx-bar" id="spx-bar" hidden>
  <span class="spx-bar__t">{{ product.title | escape }}</span>
  <span class="spx-bar__p">{{ product.selected_or_first_available_variant.price | money }}</span>
  <button class="spx-bar__b" type="button" id="spx-bar-b">Add to cart</button>
</div>

<script>
  (function () {
    var bar = document.getElementById('spx-bar');
    var proxy = document.getElementById('spx-bar-b');
    var form = document.querySelector('form[action*="/cart/add"]');
    if (!bar || !form) return;
    var real = form.querySelector('button[name="add"]');
    if (!real) return;

    bar.hidden = false;
    document.body.classList.add('spx-pad');
    proxy.addEventListener('click', function () { real.click(); });

    function sync() {
      proxy.disabled = real.disabled;
      var label = (real.textContent || '').trim();
      if (label) proxy.textContent = label;
    }
    sync();
    new MutationObserver(sync).observe(real, {
      attributes: true, childList: true, subtree: true
    });

    if (!('IntersectionObserver' in window)) { bar.dataset.show = '1'; return; }
    new IntersectionObserver(function (entries) {
      bar.dataset.show = entries[0].isIntersecting ? '0' : '1';
    }, { rootMargin: '0px 0px -40px 0px' }).observe(real);
  })();
</script>
{%- endif -%}

Step 2: render it once, in layout/theme.liquid

Shopify's docs call layout/theme.liquid the base of the theme, "through which all templates are rendered," so one line here covers every product template you have. Paste it on its own line immediately before the closing </body> tag.

{% render 'sticky-atc' %}

The snippet opens with a guard on template.name == 'product', so it prints nothing on your homepage, collections or cart.

Step 3: check on a phone, then publish or undo

Preview the duplicate on a phone, not a narrow desktop window. Scroll past the buy button and confirm the bar slides up, change a variant and tap it, confirm the drawer opens with that variant, scroll back and confirm the bar goes away. To remove it, delete the one line from layout/theme.liquid. That is the whole undo; the unrendered snippet file can stay.

One caveat: the script takes the first form whose action contains /cart/add. If a quick-add grid sits above the main one, use product-form form[action*="/cart/add"] on Dawn, product-form-component ... on Horizon.

What belongs in the bar

You have about 390 pixels of width and 60 of height, and everything you add takes width from the button. Baymard's guideline 791: "If you are using a sticky 'Add to Cart' button, surround it with sufficient white space, don't use a full-width button." The price earns its 60 pixels, because a shopper four screens down has lost track of it. The title is conditional, which is why the snippet lets it ellipsis rather than wrap. A thumbnail spends 48 pixels on something people are already looking at.

The variant picker is the one people ask for and should mostly not have. Squeezing a swatch row into a 48-pixel bar pushes it and the button toward the accessibility floor, and WCAG 2.5.8 Target Size (Minimum), at level AA, sets that floor at "at least 24 by 24 CSS pixels" (2.5.5, at AAA, asks 44 by 44). A quantity stepper is worse. Have the bar scroll an undecided shopper to the picker instead: one line, no width.

What goes wrong: tap targets, CLS, cookie banners, Shop Pay

Layout shift is the worry and the easiest thing to avoid. Google's CLS documentation says that "if a new element is added to the DOM or an existing element changes size, it doesn't count as a layout shift, as long as the change doesn't cause other visible elements to change their start position," against a threshold of "0.1 or less." A position: fixed bar animated with a transform moves nothing. A bar inserted into the document flow shifts on every load, which is what several app bars I have watched do.

Covering the bottom of the page is the failure nobody anticipates. A fixed bar sits on whatever ends the document: reviews, related products, the footer link people use to find your returns policy. That is what body.spx-pad is for, and padding at the end of a document moves nothing above it. Cookie banners are the other clash, since most also fix to the bottom. The snippet uses z-index: 4 on purpose, low enough that a consent banner wins: that choice has to be reachable, and the buy button will still be there.

Accelerated checkout is the last one. Shopify says you can "display or hide the accelerated checkout buttons, but you can't customize whether branded or unbranded accelerated checkout buttons display," so your buy area may be two buttons tall while the snippet watches one. Do not add a second Shop Pay button to the bar: you cannot style it, and you get two competing primary actions in 390 pixels.

Keep it mobile only, which is what min-width: 750px does. Desktop is a different problem. More in mobile conversion and mobile tap errors.

How much lift to expect, and why no app listing prints a number

Two published tests print enough of their sample to be worth anything. Growth Rock, last modified July 31, 2026, reports a desktop sticky buy box at "7.9% more completed orders with 99% statistical significance" on a test that "ran for 14 days and recorded approximately 2,000 conversions (orders) per variation." Its mobile drawer got a "5.2% increase in orders" at 98% significance with "over 3,000 conversion events (orders) per variation." The Good, updated May 21, 2025, reports "a 4.09% lift" with no sample size, so it is a data point, not evidence.

So 4% to 8% is the shape of a good result where the button was genuinely hard to reach. Anyone quoting 18% or 30% is quoting a vendor. Notice what the App Store listings above this page do: nothing. STKY says it will "maximize cart conversions", Bar Pro says it will "increase your revenue", and neither prints a figure. That is the only honest position available to them. A bar app counts taps on its own bar. It cannot count the orders you would have got anyway, because it never runs your store without itself.

How to test it before you believe it worked

Here is the annoying part, and the reason I would rather you move the button than test it. My arithmetic on the two-proportion formula at 95% confidence and 80% power, not a published figure: moving a 2.00% conversion rate to 2.10% needs about 315,000 sessions in each arm. A 10% lift needs about 81,000 per arm. Only at 20% does it fall to roughly 21,000, and a bar is not a 20% change.

Run that backwards against the mobile test. Over 3,000 orders per arm at a 2% conversion rate is about 150,000 sessions per arm, where the smallest effect you can reliably detect is around 7.2% relative. Growth Rock reported 5.2%. A test sized to catch 7% will still occasionally report a real-looking 5%, and those are the ones that fail to reproduce.

If you have the traffic, split at the visitor level, set the sample size in advance with the significance calculator, run whole weeks, and read the result once. Mechanics in Shopify theme A/B testing, discipline in honest A/B testing. If you do not, and only 285 of the 5,999 stores we audited run any A/B tool, watch the share of product-page sessions reaching add to cart over two matched fortnights and accept that you are measuring direction. A shopper who cannot see how to buy is not a hypothesis anyway.

I already run Hotjar or Clarity. Why did that not catch this?

My favourite number in the audit. Of the 5,858 stores, 1,686 had a heatmap or session-recording tool, and 1,158 of those still hid Add to Cart below the fold: 68.7%. Among the 4,172 without one it was 75.4%. Seven points, and two thirds of its users left with the same problem.

The reason is structural, not a knock on the tools. A scroll map tells you how far people got, a click map what they tapped. Neither says your buy button is 900 pixels below the first screen on a Pixel 8. You have to suspect it, know which report answers it, and go look in a week where you had time. That gap is why we are building StorePilot; for the tools themselves, see Clarity on Shopify.

Short version. Do the phone test. If the button is visible, do nothing. If it is not, move it up before you add a bar, and if the page has a real reason to be long, paste the snippet. More in the product page optimization guide and the Shopify CRO guide.

Disclosure. StorePilot is not on the App Store yet and cannot be installed on a live store, so this page has nothing to sell you.