Add a Sticky Add to Cart button in Shopify 2.0 theme

If you are working on broader product-page improvements, our Shopify ecommerce CRO agency services focus on reducing friction and improving conversion rates across key buying steps.

Method 1: Add a Sticky Add to Cart Button Using Custom Coding

If you are a developer and comfortable with coding, then you can add the Sticky Add to Cart to your theme using custom coding. This involves adding the necessary HTML, CSS, and JS. Here is the final result. Check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Online Store > Themes > Edit Code.

Step 2: Navigate to the Snippets folder and add a new snippet. Name it something like sticky-add-to-cart.liquid.

Step 3: Add the following code to your file.

    
        <div id="sticky-add-to-cart" class="sticky-atc">
            <div class="sticky-atc__inner">
                <div class="sticky-atc__product">
                    {% if product %}
                        <img 
                            src="{{ product.featured_image | img_url: '100x' }}" 
                            alt="{{ product.title }}"
                            class="sticky-atc__img"
                        >
                        <span class="sticky-atc__title">{{ product.title }}</span>
                    {% endif %}
                </div>

                <button 
                    class="sticky-atc__button" 
                    id="stickyAddToCartButton"
                    type="button"
                >
                    {{ 'products.product.add_to_cart' | t }}
                </button>
            </div>
        </div>
        <style>
            #sticky-add-to-cart {
                position: fixed;
                bottom: -100px;
                left: 0;
                width: 100%;
                background: white;
                box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
                z-index: 9999;
                transition: bottom .3s ease;
                padding: 12px 16px;
            }
            #sticky-add-to-cart.active {
                bottom: 0;
            }
            .sticky-atc__inner {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .sticky-atc__img {
                width: 50px;
                height: 50px;
                object-fit: cover;
                border-radius: 6px;
            }
            .sticky-atc__title {
                margin-left: 10px;
                font-size: 14px;
                font-weight: 500;
            }
            .sticky-atc__button {
                background: #000;
                color: #fff;
                padding: 10px 18px;
                border-radius: 6px;
                cursor: pointer;
                border: none;
                font-size: 15px;
                font-weight: 600;
            }
        </style>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const atcBar = document.getElementById("sticky-add-to-cart");
                const addToCartForm = document.querySelector("product-form form");

                if (!addToCartForm) return;

                const addToCartBtn = document.querySelector(".product-form__submit");

                window.addEventListener("scroll", function () {
                    if (window.scrollY > 400) {
                    atcBar.classList.add("active");
                    } else {
                    atcBar.classList.remove("active");
                    }
                });

                addToCartBtn.addEventListener("click", function () {
                    addToCartForm.querySelector("[type='submit']").click();
                });
            });
        </script>
    

Step 4: Replace this Add to Cart Form selector with the actual form.

    
        const addToCartForm = document.querySelector("product-form form");
    

Step 5: Replace this button selector ID with the ID of the Add to Cart button your theme is using.

    
        const addToCartBtn = document.querySelector(".product-form__submit");
    

Step 6: Save the changes.

Step 7: Open the main-product.liquid file. 

Step 8: Add the following code at the end of the section's HTML container or to a preferred location.

    
        {% render 'sticky-add-to-cart', product: product %}
    

Step 9: Save the changes.

Method 2: Install a Shopify App

If you are not comfortable with coding to add the Sticky Add to Cart button, then visit the Shopify App Store, search for the appropriate app, install it in your store, and customize the look and appearance. Here is the final result. Check the GIF below to see how it will look before we go through the steps.

Step 1: Navigate to Shopify Admin > Apps.

Step 2: Click the App and Sales Channel Settings button.

Step 3: Visit the Shopify App Store.

Step 4: Search for the app, such as Sticky Add To Cart Bar Pro

Step 5: Install the app.

Step 6: Reconfirm the installation process.

Step 7: Select a plan that meets your needs.

Step 8: Open the dashboard and click the Enable button.

Step 9: Ensure this is checked and save the changes.

Step 10: Navigate to the Settings and ensure these settings are enabled for desktop and mobile to meet your requirements. Also, there are other settings available to change the colors to match the brand.

Step 11: Scroll down to the bottom and click the Save Settings button.

Step 12: Visit your Product page to see if the integration is successful.

Some popular ones are as follows:

• Sticky Add To Cart Bar Pro
• Wi Buy Now: Sticky Add to Cart
• Sticky Add to Cart — Stickify
• Libautech: Sticky Add to Cart
  

If you are also exploring personalization features on product pages, you may like our guide on how to add a text box to a Shopify product page.

Conclusion 

Adding a sticky Add to Cart button in Shopify 2.0 is a practical way to improve product-page usability and keep your main CTA visible when shoppers are ready to buy. Whether you choose custom code or a Shopify app, the goal is the same: remove friction, improve mobile browsing, and help more visitors convert without extra effort. If you want to go beyond one feature and improve your store’s full conversion journey, Ecomx Agency also works with Shopify brands on CRO, Shopify SEO, app integrations, and AI search optimization to turn more traffic into sales.

Ready to improve your Shopify product page conversions beyond just a sticky Add to Cart button? Talk to the experts at Ecomx Agency for CRO, Shopify SEO, and advanced product page optimization.