Add the Sticky "Add to Cart" Button in Shopify in 5 Minutes

Adding a sticky "Add to Cart" button in Shopify improves user experience by keeping the purchase option visible as customers scroll. This makes it easier for customers to buy without having to scroll back up. You can implement this in just 5 minutes using a simple app or a quick bit of custom code.

This guide walks you through both methods so you can choose what works best for your store.

» Take your customer experience to the next level by managing your out-of-stock products effectively

What Is a Shopify Sticky “Add to Cart” Button?

Why the Sticky "Add to Cart" Button Matters

Implementing a sticky "Add to Cart" button in your Shopify store can offer several benefits that improve the shopping experience and drive conversions, such as:

• Enhances customer experience: The sticky "Add to Cart" button helps create a seamless shopping journey by working alongside customer-focused features like back-in-stock notifications and custom filters.
• Increases online sales: By simplifying the checkout process, this feature helps turn browsing into purchasing more efficiently.
• Reduces cart abandonment: Customers are less likely to leave without completing their purchase when adding items to their cart is quick and accessible.
• Improves mobile experience: On smaller screens, a sticky button ensures that users can add products to their cart effortlessly, boosting engagement for mobile shoppers.
• Customizable design: Allows you to match the button’s style to your store’s branding, creating a cohesive and professional look.

» Want to remove the "Add to Cart" button? Learn how to do it quickly and easily

How to Add a Sticky “Add to Cart” Button in Shopify

There are two simple ways to add a sticky “Add to Cart” button in Shopify: you can either install a Shopify app that handles it for you in minutes or manually add custom code for more control over the design and placement.

Method 1: Quick Setup With Apps

Suitable for non-technical users who want instant results.

Installation Steps:

1. Head over to your Shopify Admin.
2. Under Apps in the side panel, click + Add.


3. In the pop‑up menu, click the Shopify App Store.


4. Once redirected, use the search bar to search "sticky add to cart".



» Keep your customers engaged and returning with our key tactics

Method 2: Add Custom Code

Step 1: Locate Your Add to Cart Button Code (1 Minute)

• Go to your Shopify Admin.
• Navigate to: Online Store > Themes > Actions > Edit Code.


• Open the snippets folder and look for: buy-buttons.liquid.
• If you don't see this file, look in Templates for product.liquid or product-template.liquid.

Step 2: Add Your Sticky Button Code (2 Minutes)

In your buy-buttons.liquid file, go through the code carefully and locate the add-to-cart section that ends with this code:

</div>
     {%- endform -%}
    </product-form> /* or </product-form-component>

<!-- STANDARD STICKY BUTTON -->
        <div class="sticky-atc-container">
            <button
                type="submit"
                 name="add"
                 class="sticky-atc-button"
                 {% if product.selected_or_first_available_variant.available == false
                     or quantity_rule_soldout
                     or product.selected_or_first_available_variant == null
                  %}
                    disabled
                {% endif %}
             >
                {%- if product.selected_or_first_available_variant == null -%}
                      {{ 'products.product.unavailable' | t }}
                {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                                  {{ 'products.product.sold_out' | t }}
                      {%- else -%}
                             {{ 'products.product.add_to_cart' | t }}
                      {%- endif -%}
                   </button>
                </div>

Click Save when done.



Step 3: Add the Sticky CSS Styling (1 Minute)

Find your CSS file and go to the assets folder.



Open: base.css (for Dawn theme) or theme.css / styles.css for other themes.

Scroll to the very bottom of your CSS file and add:

.sticky-atc-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 999;
  transition: transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sticky-atc-container.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sticky-atc-button {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
  min-width: 160px;
  max-width: 200px;
}
sticky-atc-button:hover {
  background: rgba(0, 0, 0, 1);
  transform: translateY(-2px);
}

.sticky-atc-button:disabled {
  background: rgba(128, 128, 128, 0.8);
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .sticky-atc-container {
    bottom: 15px;
    left: 50%;
    right: auto;
  }
  
  .sticky-atc-button {
    max-width: 250px;
    font-size: 15px;
    padding: 14px 28px;
  }
}

@media (min-width: 768px) {
  .sticky-atc-container {
    bottom: 30px;
    right: 30px;
    left: auto;
    transform: translateY(100px);
  }
  
  .sticky-atc-container.show {
    transform: translateY(0);
  }
}

Click Save when done.

Step 4: Complete JavaScript (1 Minute)

Go to theme.liquid.



Add this right before </body> in theme.liquid:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const stickyContainer = document.querySelector('.sticky-atc-container');
  const originalButton = document.querySelector('.product-form__submit:not(.sticky-atc-button)');
if (!stickyContainer || !originalButton) return;
  function updateStickyButton() {
    const rect = originalButton.getBoundingClientRect();
    const isOriginalVisible = rect.top < window.innerHeight && rect.bottom > 0;
    if (window.scrollY > 100 && !isOriginalVisible) {
      stickyContainer.classList.add('show');
    } else {
      stickyContainer.classList.remove('show');
    }
  }
  
  window.addEventListener('scroll', updateStickyButton);
  updateStickyButton();
});
</script>

» Learn how to change text on the "Add to Cart" button in Shopify

Troubleshooting Your Shopify Sticky Add to Cart Button

While adding a sticky “Add to Cart” button can boost your Shopify store’s usability, sometimes things don’t go as smoothly as planned. Whether the button isn’t showing up, behaving oddly, or not working well on mobile, these common hiccups can usually be fixed with a few simple checks.

Challenge 1: Sticky Button Not Showing Up

• Challenge: Sometimes the sticky button just doesn’t show up, which means customers can’t quickly add items to their cart.
• Solution: Make sure the app you installed is properly activated. If you added the button by editing your theme, double-check that you placed the changes in the right files. Confirm that your Shopify theme supports sticky elements and that no other features or apps are blocking the button.

Challenge 2: Sticky Button Covers Other Page Content

• Challenge: If the button blocks important text, images, or navigation, it can frustrate visitors.
• Solution: Adjust the button’s placement so it doesn’t cover any content. You may need to add extra space at the bottom of your pages to prevent the button from overlapping with other elements.

Challenge 3: Sticky Button Not Working on Mobile

• Challenge: The sticky button works on desktop but disappears or doesn’t work on mobile.
• Solution: Make sure your store’s design supports mobile devices and that any apps or settings you use allow the sticky button to show on smaller screens. Test your site on several devices to check for issues and adjust settings accordingly.

Tips to Optimize for Conversions

Adding a sticky “Add to Cart” button in Shopify is a strong start—but a few smart adjustments can make it even more effective at turning browsers into buyers. Here’s how to get the most out of it:

• Use clear, action-driven text: Instead of just saying “Add to Cart,” test phrases like “Buy Now,” “Get Yours,” or “Add & Continue Shopping.” These subtle changes can better align with your store’s tone and prompt quicker decisions.
• Match your brand’s visual style: Customize the button’s color, font, and size so it stands out—without clashing with the rest of your store. High-contrast buttons tend to catch attention, but make sure they still feel cohesive with your branding.
• Position it for mobile-first shoppers: Keep the button anchored at the bottom of the screen on mobile devices. This is where thumbs naturally rest, making it easy for users to take action without interruption.
• Include urgency or social proof: If your theme or app allows, add short messages near the button like “Only 2 left!” or “Over 1,000 sold.” These nudges can push hesitant shoppers to act.
• Pair it with other helpful tools: Combine your sticky Add to Cart button with tools like Egnition’s StockIQ – Out-of-Stock Manager to maintain a smoother shopping experience across your store. This tool automatically hides or pushes out-of-stock products to the bottom of collections without affecting SEO.
• Monitor and test performance: Use Shopify’s analytics or third-party tools to track how often the button is clicked, especially on mobile vs. desktop. Consider A/B testing different styles or placements to see what resonates most with your audience.

» Optimize your Shopify store for mobile users by using the recommended image sizes

Optimize the Buyer Journey Beyond Sticky "Add to Cart" Buttons

A sticky “Add to Cart” button makes buying easy, but managing inventory improves the shopping experience further. Egnition’s StockIQ - Out-Of-Stock Manager keeps your store organized by moving out-of-stock products to the bottom of collections or hiding them without affecting SEO. This helps customers see only available products, reducing frustration and increasing conversions.

Pair the sticky Add to Cart button with StockIQ to deliver a smooth, reliable shopping experience that guides customers to the products they want and encourages purchases.

StockIQ – Out-of-Stock Manager

Keep sold-out products out of the way, reduce shopper frustration, and support smoother conversions with this tool.

Start Free Trial



» Streamline your stock levels. Discover the benefits of automated inventory management in Shopify

Making Shopify Sticky Add to Cart Work for You

A Shopify sticky Add to Cart button is more than just a nice-to-have—it’s a powerful way to simplify the buying process and keep customers engaged, especially when optimized for mobile devices.

With proper Shopify sticky Add to Cart button mobile optimization, your store ensures shoppers can add products anytime, no matter what device they use.

» Go beyond sticky "Add to Cart" buttons. See how smarter inventory management with StockIQ can improve your store’s shopping experience