How to Add a Sticky Add-to-Cart Bar in Shopify Without an App

A sticky add-to-cart bar is one of the most frequently installed conversion features on Shopify stores. It is also one of the most frequently misunderstood.

Merchants install it expecting a conversion lift and sometimes get one. Sometimes they don't. The difference usually comes down to what problem the bar is actually solving — and whether that problem is the real one.

What a Sticky Add-to-Cart Bar Actually Does

A sticky add-to-cart bar is a fixed element that appears at the top or bottom of the screen as a shopper scrolls down your product page. It keeps the product name, price, and add-to-cart button visible at all times — so a shopper who has scrolled past your product form doesn't have to scroll back up to buy.

That is the specific problem it solves. Nothing more.

It does not improve your photography. It does not fix weak product copy. It does not build trust if your page hasn't done that job already. If a shopper scrolls through your product page and is not convinced, making the button more visible doesn't change that.

What it does do is remove friction for shoppers who are already sold. Heatmap and scroll depth data consistently show that shoppers on product pages scroll deep — around 35% scroll past the product description, and 20% reach the reviews section. Most of those shoppers don't scroll back up. A sticky bar meets them where they are.

A/B tests back this up. One documented test found 7.9% more completed orders with a sticky add-to-cart button, with 99% statistical significance. A second test found a 5.2% increase using a drawer-style variation. Those are real lifts on stores where the product page was already doing its job.

The takeaway: get your product page right first. Then add the sticky bar.

When It Makes Sense to Add One Without an App

There are two ways to add a sticky add-to-cart bar to Shopify: install an app, or add it directly to your theme code.

The app route is faster to set up but adds another script to your store. Given how much app bloat contributes to slow load times on established stores — something we've covered in detail in our Shopify speed optimization guide — it's worth asking whether an app is necessary for a feature this focused.

For most stores on a Shopify 2.0 theme, it isn't. The code to add a sticky bar is straightforward, it's well-documented by the community, and once it's in your theme it loads as part of the page rather than as a separate app script. That matters for your LCP and overall PageSpeed score.

If you're on a highly customized theme or an older OS 1.0 theme, an app may be the safer choice to avoid breaking existing functionality. But if you're on Dawn or another modern Shopify 2.0 theme, the code approach is worth doing.

How to Add a Sticky Add-to-Cart Bar to the Shopify Dawn Theme

This walkthrough is for the Dawn theme. The logic applies to other Shopify 2.0 themes, but file names and structure will vary.

Before making any changes, duplicate your theme. Go to Online Store > Themes, click the three-dot menu on your live theme, and select Duplicate. Work on the duplicate until everything looks right, then publish it. Never edit your live theme directly.

Step 1: Open your theme code

In your Shopify admin, go to Online Store > Themes. On your duplicated theme, click Actions > Edit Code.

Step 2: Add a new snippet

In the left sidebar, find the Snippets folder. Click Add a new snippet and name it sticky-atc.

Paste the following code into the new snippet fi

{% unless product == empty %} <div class="sticky-atc" id="sticky-atc" style="display:none;"> <div class="sticky-atc__inner"> <div class="sticky-atc__product"> {% if product.featured_image %} <img src="{{ product.featured_image | img_url: '60x60', crop: 'center' }}" alt="{{ product.title }}" width="40" height="40"> {% endif %} <span class="sticky-atc__title">{{ product.title }}</span> </div> <div class="sticky-atc__price"> <span>{{ product.selected_or_first_available_variant.price | money }}</span> </div> <div class="sticky-atc__action"> <button type="button" class="sticky-atc__btn button button--primary" id="sticky-atc-btn" {% 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> </div> </div> </div> {% endunless %}

Step 3: Add the CSS

Open Assets > base.css (or your theme's main CSS file). Scroll to the bottom and add:

.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 12px 20px;
  z-index: 999;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

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

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

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

.sticky-atc__product img {
  border-radius: 4px;
  flex-shrink: 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;
  white-space: nowrap;
}

.sticky-atc__btn {
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .sticky-atc__product img,
  .sticky-atc__title {
    display: none;
  }
  .sticky-atc__inner {
    justify-content: space-between;
  }
}

Step 4: Add the JavaScript

Open Assets > global.js or create a new JS file in the Assets folder called sticky-atc.js. Add the following:

(function() {
  const stickyBar = document.getElementById('sticky-atc');
  const stickyBtn = document.getElementById('sticky-atc-btn');
  if (!stickyBar) return;

  const productForm = document.querySelector('product-form') || document.querySelector('.product-form');
  if (!productForm) return;

  stickyBar.style.display = 'block';

  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (!entry.isIntersecting) {
        stickyBar.classList.add('is-visible');
      } else {
        stickyBar.classList.remove('is-visible');
      }
    });
  }, { threshold: 0.1 });

  observer.observe(productForm);

  if (stickyBtn) {
    stickyBtn.addEventListener('click', function() {
      const originalBtn = productForm.querySelector('[name="add"]');
      if (originalBtn) originalBtn.click();
    });
  }
})();

{% render 'sticky-atc', product: product %}

<script src="{{ 'sticky-atc.js' | asset_url }}" defer></script>

Step 6: Preview and test

Save all files. In your theme editor, navigate to a product page and scroll down. The sticky bar should appear once the main product form scrolls out of view and disappear when you scroll back up.

Test on mobile. The bar should show only the price and button on small screens, and the full product name with thumbnail on desktop.

Coaching tip: Check the bar against a few different product pages — especially products with multiple variants. The "Add to cart" button should reflect the currently selected variant's availability and price. If it doesn't update when a shopper changes the variant, that's a sign the JavaScript needs to be connected to your theme's variant change events, which varies by theme.

What to Do If You're Not on Dawn

The same approach works on other Shopify 2.0 themes, but the file names will differ. Look for the main product section file — it is often called product.liquid, product-template.liquid, or similar. Add the snippet render call in the same position: just before the schema tag.

The CSS and JavaScript can go in whatever asset files your theme uses for custom styles and scripts. If your theme does not have a clear place for custom CSS or JS, ask a developer to add it cleanly rather than dropping it into a minified file.

If you're on an OS 1.0 theme, the snippet approach still works but you'll need to inject the snippet render call through theme.liquid rather than a product section file. This is more disruptive to the theme structure and a developer should handle it.

Should You Use an App Instead?

If the code approach feels risky or your theme has complex customizations that could conflict, an app is a reasonable alternative. The Shopify App Store has several well-maintained sticky cart options. Just be mindful of the additional script load and check the app's impact on your PageSpeed score before and after installing.

The code approach outlined here adds no additional HTTP requests beyond what's already in your theme. That keeps your load time clean.

How to Add a Sticky Add-to-Cart Bar in Shopify TL;DR

A sticky add-to-cart bar removes friction for shoppers who are already sold — it does not convert unconvinced shoppers. A/B tests show 5–8% conversion lifts on product pages that are already performing well. For stores on Shopify 2.0 themes like Dawn, you can add one without an app by creating a snippet, adding CSS to your stylesheet, adding JavaScript to handle the scroll behavior, and rendering the snippet on your product page. Test on both mobile and desktop and verify that the bar updates correctly when shoppers change variants. If your theme is heavily customized or on OS 1.0, an app or developer assistance is the safer route.

If you want help implementing this on your store, get a free quote from TaskHusky. We can add a sticky add-to-cart bar, connect it to your variant selectors, and make sure it matches your theme's design without slowing your store down.