How to Add a Sticky Add-to-Cart Button on Shopify

A sticky add-to-cart button stays visible as customers scroll through your Shopify product pages, making it easier for them to purchase and boosting conversions. In this step-by-step tutorial, we’ll show you how to add a sticky add-to-cart button using custom Liquid, CSS, and JavaScript—no apps required. Perfect for Shopify store owners looking to optimize sales in 2025!

Why Add a Sticky Add-to-Cart Button to Your Shopify Store?

• Increase Conversions: Keep the purchase option accessible at all times.
• Improve User Experience: Simplify the buying process, especially on mobile.
• Cost-Effective: Avoid app subscriptions with custom code.
• SEO Boost: Engaged users stay longer, signaling quality to search engines.

For more Shopify customization ideas, visit our Shopify Sections Guide.

‍

Prerequisites

Before you begin, ensure you have:

• A Shopify account with admin access.
• Basic knowledge of HTML, CSS, JavaScript, and Shopify’s theme editor.
• A duplicated theme for safety (always back up before editing).

‍

Step 1: Understand the Sticky Add-to-Cart Button

A sticky add-to-cart button is a fixed element that remains on-screen as users scroll. We’ll add it to product pages using Shopify’s Liquid to integrate with the existing add-to-cart form, style it with CSS, and use JavaScript for smooth functionality.

Learn more about Shopify’s Liquid in Shopify’s Liquid Reference.

‍

Step 2: Access Your Shopify Theme Editor

1. Log in to your Shopify admin panel.
2. Go to Online Store > Themes.
3. Find your active theme, click Actions, then select Edit Code.

‍

Step 3: Create the Sticky Add-to-Cart Button Code

We’ll add the button to product pages by modifying the product template and including custom styles and scripts.

‍

3.1: Update the Product Template

1. In the theme editor, locate the Templates folder and open product.liquid (or product-template.liquid in some themes).
2. Find the existing add-to-cart form (usually contains <form action="/cart/add">).
3. Below the form, add the following Liquid code for the sticky button:

<div class="sticky-add-to-cart" style="display: none;">
  <button type="button" class="sticky-add-to-cart__button">Add to Cart</button>
</div>

4. Save the file.

Note: This code assumes your theme uses a standard add-to-cart form. If your theme uses a custom form ID, you may need to adjust the JavaScript later.

‍

3.2: Add CSS for Sticky Positioning

1. In the Assets folder, open theme.css (or styles.css.liquid in some themes).
2. Add the following CSS at the bottom:

.sticky-add-to-cart {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 1000;
  max-width: 90%;
  margin: 0 auto;
  border-radius: 5px;
}

.sticky-add-to-cart__button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.sticky-add-to-cart__button:hover {
  background-color: #0056b3;
}

@media (min-width: 768px) {
  .sticky-add-to-cart {
    max-width: 400px;
  }
}

3. Save the file.

Explanation: The CSS makes the button fixed at the bottom of the screen, adds a shadow for depth, and ensures responsiveness with a media query for larger screens.

‍

3.3: Add JavaScript for Functionality

1. In the Assets folder, open theme.js (or create custom.js if it doesn’t exist).
2. Add the following JavaScript at the bottom:

document.addEventListener('DOMContentLoaded', function() {
  const stickyButton = document.querySelector('.sticky-add-to-cart__button');
  const originalAddToCart = document.querySelector('form[action="/cart/add"] button[type="submit"]');
  const stickyContainer = document.querySelector('.sticky-add-to-cart');

  if (stickyButton && originalAddToCart && stickyContainer) {
    // Show sticky button when scrolling past original button
    window.addEventListener('scroll', function() {
      const originalButtonRect = originalAddToCart.getBoundingClientRect();
      if (originalButtonRect.top < 0) {
        stickyContainer.style.display = 'block';
      } else {
        stickyContainer.style.display = 'none';
      }
    });

    // Trigger original add-to-cart button on sticky button click
    stickyButton.addEventListener('click', function() {
      originalAddToCart.click();
    });
  }
});

3. If you created a new custom.js, include it in theme.liquid by adding this line before </body>:

{{ 'custom.js' | asset_url | script_tag }}

4. Save all files.

Explanation: The JavaScript shows the sticky button when the original add-to-cart button is out of view and triggers the original form’s submission when clicked, ensuring compatibility with Shopify’s cart system.

‍

Step 4: Test Your Sticky Add-to-Cart Button

1. Preview your store and navigate to a product page.
2. Scroll down to confirm the sticky button appears when the original add-to-cart button is out of view.
3. Click the sticky button to ensure it adds the product to the cart.
4. Test on mobile and desktop to verify responsiveness.