How to Add a Sticky Add-to-Cart Button on Shopify (Free Code)

Product pages keep getting longer.

Merchants add descriptions, product benefits sections, comparisons, reviews, FAQ sections — all content that converts. But it pushes the Add to Cart button off screen. A sticky add-to-cart button fixes this by keeping the purchase action visible as shoppers scroll.

Studies from the Baymard Institute show that persistent action buttons on mobile increase conversion rates by 7-9%. On long product pages, that's the difference between a visitor who buys and one who gets lost scrolling.

Google's Core Web Vitals documentation emphasizes that interactive elements should remain accessible without excessive scrolling — sticky buttons directly address this UX requirement.

In this tutorial, you'll get a complete sticky add-to-cart implementation — Liquid, CSS, and JavaScript — that you can copy and paste into your Shopify theme in under 10 minutes. No app required. For more free code patterns like this, check our Shopify Liquid code examples collection.

What is a sticky add-to-cart button and why does it boost conversions?

A sticky add-to-cart button is a fixed-position element that remains visible at the bottom of the browser window as shoppers scroll down a product page. Baymard Institute research across 71 e-commerce sites found that persistent action buttons increase mobile conversion rates by 7-9%, with even higher impact on pages longer than 3 screen heights.

A sticky add-to-cart button is a fixed-position element that stays visible at the bottom of the viewport as shoppers scroll through your product page. Instead of forcing visitors to scroll back up to find the Add to Cart button, it follows them — always one tap away from buying.

Here is what makes this pattern effective:

• Reduces friction. The purchase action is always within reach, regardless of scroll position.
• Works on mobile. Mobile screens are small. Scrolling back up on a phone is awkward and interruptive — 65-75% of Shopify traffic comes from mobile devices.
• Creates a persistent CTA. The button acts as a constant visual reminder that the visitor can buy now.
• Displays key info. A well-built sticky bar shows the product title, price, and variant selection alongside the button.

The implementation below includes product image, price, variant selection, and the button — covering the full-bar approach that delivers the highest conversion lift.

How do you build a sticky add-to-cart bar with Liquid code?

The implementation uses three components: a Liquid template for the HTML structure, scoped CSS for responsive styling, and a lightweight JavaScript handler using the Intersection Observer API. The total code weight is under 3KB — compared to 100-200KB for typical sticky cart apps — with zero external dependencies.

Here's a fully functional sticky add-to-cart bar for Shopify. This works with most themes including Dawn, Refresh, and other Online Store 2.0 themes.

Step 1: Create the Snippet

In your Shopify admin, go to Online Store > Themes > Edit Code. Under the snippets/ folder, create a new file called sticky-add-to-cart.liquid and paste this code:

{%- comment -%}
  Sticky Add to Cart Bar
  Appears when the main Add to Cart button scrolls out of view
{%- endcomment -%}

<div id="sticky-atc" class="sticky-atc" style="display:none;" role="complementary" aria-label="Quick add to cart">
  <div class="sticky-atc__inner">
    <div class="sticky-atc__product-info">
      {% if product.featured_image %}
        <img
          src="{{ product.featured_image | image_url: width: 80 }}"
          alt="{{ product.featured_image.alt | escape }}"
          width="40"
          height="40"
          class="sticky-atc__image"
          loading="lazy"
        >
      {% endif %}
      <div class="sticky-atc__details">
        <span class="sticky-atc__title">{{ product.title | truncate: 30 }}</span>
        <span class="sticky-atc__price">
          {%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
            <s class="sticky-atc__compare-price">{{ product.selected_or_first_available_variant.compare_at_price | money }}</s>
          {%- endif -%}
          {{ product.selected_or_first_available_variant.price | money }}
        </span>
      </div>
    </div>

    {% if product.variants.size > 1 %}
      <div class="sticky-atc__variant">
        <select id="sticky-atc-variant" class="sticky-atc__select" aria-label="Select variant">
          {% for variant in product.variants %}
            <option
              value="{{ variant.id }}"
              {% if variant == product.selected_or_first_available_variant %}selected{% endif %}
              {% unless variant.available %}disabled{% endunless %}
            >
              {{ variant.title }}{% unless variant.available %} — Sold Out{% endunless %}
            </option>
          {% endfor %}
        </select>
      </div>
    {% endif %}

    <form action="/cart/add" method="post" class="sticky-atc__form">
      <input type="hidden" name="id" id="sticky-atc-id" value="{{ product.selected_or_first_available_variant.id }}">
      <button
        type="submit"
        class="sticky-atc__button"
        {% unless product.selected_or_first_available_variant.available %}disabled{% endunless %}
      >
        {%- if product.selected_or_first_available_variant.available -%}
          Add to Cart
        {%- else -%}
          Sold Out
        {%- endif -%}
      </button>
    </form>
  </div>
</div>

Step 2: Add the CSS

In the same snippets/sticky-add-to-cart.liquid file, add this CSS above the HTML (or in your theme's CSS file):

<style>
  .sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .sticky-atc--visible {
    transform: translateY(0);
  }

  .sticky-atc__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .sticky-atc__product-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .sticky-atc__image {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .sticky-atc__details {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .sticky-atc__title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-atc__price {
    font-size: 14px;
    font-weight: 500;
  }

  .sticky-atc__compare-price {
    color: #999;
    margin-right: 4px;
    font-weight: 400;
  }

  .sticky-atc__select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
  }

  .sticky-atc__button {
    background: #222;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
  }

  .sticky-atc__button:hover {
    background: #444;
  }

  .sticky-atc__button:disabled {
    background: #ccc;
    cursor: not-allowed;
  }

  /* Mobile: hide product image, show compact layout */
  @media (max-width: 768px) {
    .sticky-atc__image {
      display: none;
    }

    .sticky-atc__variant {
      display: none;
    }

    .sticky-atc__inner {
      gap: 8px;
    }

    .sticky-atc__button {
      padding: 12px 16px;
    }
  }
</style>

Step 3: Add the JavaScript

Add this JavaScript at the bottom of the same snippet file:

<script>
  (function() {
    var stickyBar = document.getElementById('sticky-atc');
    var mainForm = document.querySelector('.product-form, [data-product-form], form[action="/cart/add"]');
    var variantSelect = document.getElementById('sticky-atc-variant');
    var hiddenId = document.getElementById('sticky-atc-id');

    if (!stickyBar || !mainForm) return;

    // Show/hide sticky bar based on main form visibility
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        stickyBar.style.display = 'block';
        if (entry.isIntersecting) {
          stickyBar.classList.remove('sticky-atc--visible');
        } else {
          stickyBar.classList.add('sticky-atc--visible');
        }
      });
    }, { threshold: 0 });

    observer.observe(mainForm);

    // Sync variant selection
    if (variantSelect) {
      variantSelect.addEventListener('change', function() {
        hiddenId.value = this.value;
      });

      // Also sync when main page variant changes
      var mainVariantSelect = mainForm.querySelector('select[name="id"], input[name="id"]');
      if (mainVariantSelect) {
        var mutationObserver = new MutationObserver(function() {
          variantSelect.value = mainVariantSelect.value;
          hiddenId.value = mainVariantSelect.value;
        });
        mutationObserver.observe(mainVariantSelect, { attributes: true, attributeFilter: ['value'] });
      }
    }
  })();
</script>

Step 4: Include the Snippet

Open your sections/main-product.liquid (or templates/product.liquid depending on your theme) and add this line at the bottom, just before the closing {% schema %} tag or at the end of the section content:

{% render 'sticky-add-to-cart' %}

If you need help navigating your theme's file structure, our guide to editing Shopify themes covers where to find each template file.

How does the Intersection Observer approach work under the hood?

The Intersection Observer API detects when the main Add to Cart form scrolls out of the viewport, triggering the sticky bar to slide up from the bottom. This approach fires zero scroll event listeners, making it dramatically more performant than position-based detection — a single observer callback versus hundreds of scroll events per second.

The implementation uses the Intersection Observer API to detect when the main Add to Cart form scrolls out of the viewport. When it does, the sticky bar slides up from the bottom of the screen. When the user scrolls back up to the main form, the bar slides back down.

This approach is better than scroll-position-based detection because:

• It's more performant (no scroll event listeners firing on every pixel)
• It's more accurate (the bar shows exactly when the real button disappears)
• It works regardless of page length or content above the product form
• Browser support covers 97%+ of active browsers, including all mobile browsers that Shopify merchants need to support

The variant synchronization uses a MutationObserver to keep the sticky bar's dropdown in sync with whatever variant the shopper selected on the main product form. This matters for stores with multiple variants — without it, a shopper could select "Large / Blue" on the page but add "Small / Red" from the sticky bar.

Want the easy version? LiquidBoost's ready-made snippets deliver these exact elements — tested, styled, and installable in minutes.

What mobile-specific adjustments does the sticky bar need?

Mobile is where sticky add-to-cart buttons matter most — 65-75% of Shopify traffic comes from phones. The CSS above hides the product image and variant selector on screens under 768px to conserve space, and tightens button padding for thumb-friendly sizing. Stores with 70%+ mobile traffic should consider making the button full-width below 480px.

Mobile is where sticky add-to-cart buttons matter most. The CSS above includes mobile-specific adjustments:

• Product image is hidden on screens under 768px to save space
• Variant selector is hidden on mobile — it's too fiddly on small screens, and the main page selector is usually recent enough in memory
• Button padding is tightened for thumb-friendly sizing without wasting space

If your store has a large mobile audience (check your analytics — most Shopify stores are 65-75% mobile), consider making the sticky button full-width on mobile:

@media (max-width: 480px) {
  .sticky-atc__product-info {
    display: none;
  }

  .sticky-atc__button {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }
}

The full-width approach sacrifices product info display for maximum button tap area. For stores selling single-variant products, this trade-off is almost always worth it.

Mobile performance matters beyond just layout — and the sticky bar's code weight plays a role in that.

How can you customize the sticky bar to match your brand?

Three common customizations take under 5 minutes each: changing the button color (update the background value in .sticky-atc__button), adding a quantity selector (insert a number input before the submit button), and showing an "Added!" confirmation state (add a brief JavaScript text swap after form submission). Each modification requires editing 1-3 lines of code.

Change the button color to match your brand by updating the background value in .sticky-atc__button. Use your theme's primary action color for consistency.

Add a quantity selector by inserting a number input before the submit button in the form:

<input type="number" name="quantity" value="1" min="1" class="sticky-atc__qty" style="width:50px; text-align:center; padding:8px; border:1px solid #ddd; border-radius:6px;">

Show "Added!" confirmation by adding a brief state change after form submission:

stickyBar.querySelector('form').addEventListener('submit', function(e) {
  var btn = stickyBar.querySelector('.sticky-atc__button');
  var originalText = btn.textContent;
  btn.textContent = 'Added!';
  setTimeout(function() { btn.textContent = originalText; }, 2000);
});

Add trust text below the button to reinforce purchase confidence:

<p style="font-size:11px; color:#666; text-align:center; margin:4px 0 0;">Free shipping on orders over $75</p>

For guidance on pairing the sticky bar with trust signals, see our trust badges guide. The right combination of persistent CTA and trust messaging compounds the conversion effect.

Should you use a sticky cart app or this free code snippet?

Sticky add-to-cart apps cost $5-10/month ($60-120/year) and add 100-200KB of JavaScript with external server requests. This free code snippet weighs under 3KB total, runs with zero external dependencies, and gives you full control over every design detail. The only scenario favoring an app is if you need drag-and-drop configuration without any code editing.

You can find sticky add-to-cart apps on the Shopify App Store, but consider the trade-offs:

This free code snippet gives you full control with zero performance overhead. And if you want additional product page elements like trust badges, countdown timers, or social proof sections, the LiquidBoost marketplace has lightweight code snippets that pair with this sticky bar — all without the speed penalty of apps.

For more ways to customize your theme without developers, check out our Shopify Dawn theme customization guide. The sticky bar is one piece of a fully optimized product page — and the social proof elements around it matter just as much.

FAQ

Will this sticky add-to-cart code work with any Shopify theme?

This code works with most Shopify themes, including Dawn and all Online Store 2.0 themes. The Intersection Observer targets the product form element, which exists in virtually all themes. If your theme uses a non-standard form structure, you may need to adjust the CSS selector in the JavaScript — look for form[action="/cart/add"] and match it to your theme's form class.

Does a sticky add-to-cart button really increase conversions?

Yes. Research from Baymard Institute and multiple A/B testing case studies show persistent action buttons improve conversions by 7-9%, with even higher impact on mobile. The effect scales with page length — product pages with reviews, FAQs, and comparison content see the largest lift because the original Add to Cart button scrolls further off screen.

Will this code slow down a Shopify store?

No. This snippet adds roughly 3KB total (HTML + CSS + JS), uses no external resources, and relies on the performant Intersection Observer API instead of scroll event listeners. Compare that to a sticky cart app that typically adds 100-200KB of JavaScript and makes 2-5 external server requests. For more on keeping your store fast, see our Shopify speed optimization guide.

How do you change the sticky bar's button style to match a theme?

Update the CSS variables in .sticky-atc__button. Change background for the button color, border-radius for roundness, and font-size/padding for sizing. Match these to your theme's primary action button styles for a consistent look. You can inspect your theme's existing button styles using your browser's developer tools (right-click > Inspect).

Can you use this sticky bar alongside LiquidBoost snippets?

Absolutely. This sticky bar is designed to complement other product page elements. Pair it with Trust Badges near the main Add to Cart button, a Dynamic Countdown Bar above the product section, and Product Benefits in the description area for a complete conversion-optimized product page. All LiquidBoost snippets use scoped CSS that avoids conflicts.

Keep Reading

• 20 Shopify Liquid Code Examples You Can Copy and Paste
• How to Add Social Proof to Your Shopify Store
• Best Trust Badges for Shopify: Free and Paid Options Compared