How to Create a Sticky Add to Cart Button in Shopify?

Many customers find it challenging to scroll back to the long product page to add an item to the cart, which leads to losing their buying interest. If your customers face such situations, a sticky add to cart button for Shopify is the solution.

In this guide, you’ll find options to make add to cart button sticky in Shopify, including the sticky add to cart button Shopify code.

What is a Sticky Add to Cart Button in Shopify?

In Shopify, the sticky add to cart button stays on the page even if customers scroll down. It makes it easy for customers to add products to their cart without scrolling back to the top.

Here’s an example of a sticky add to cart button in Shopify.

Sticky add to cart button in Shopify is beneficial in the following ways:

• Simplifies customer’s purchase journey
• Encourages the customers to add the product to the cart
• Increases conversion rate by reducing friction

It can be a good option if your product page is very lengthy.

Options to Make Sticky Add to Cart Button in Shopify

There are various ways:

• Use an App – You can find many apps that help you make the “add to cart” button sticky. However, this option is a bit costly since the apps charge fixed monthly fees. Also, it’s not a wise idea to install one more app in the store just for this little function.
• Custom Snippet – This is the best option to make a sticky add to the cart and customize it. You can use the no-app snippet code by Meetanshi and customize it as per your store’s design and brand. This does not require you to write any code or technical expertise.
• Manual Coding – If you’re good at coding and Shopify liquid customization, you can modify the theme liquid files to make the add to cart sticky.

In this tutorial, find how you can use ready-made snippet to make the add to cart button sticky. You’ll also get the complete code.

Method 1: Use Custom Snippet for Sticky Add to Cart in Shopify

You can install our custom theme snippet to make sticky add to cart. It’s better than using an app or coding manually.

Download and extract the sticky add to cart snippet package file on your computer. You’ll get the complete code file, along with a readme.txt for installation steps.

Follow the installation steps to install the Shopify Sticky Add to Care snippet code in the store.

Once done, you can go to Themes > Customize > Theme Settings and there you’ll have the “Meetanshi Sticky Add to Cart” settings.

Here, you can:

• Enable the add to cart sticky functionality
• Display the sticky add to cart on the top or bottom of the page
• Choose fonts, colors, and text on the sticky bar
• Customize the sticky add to cart for mobile and desktop devices

Configure the settings as per your needs and save the theme.

Congratulations! You’ve successfully made add to cart button stick in the store. It works flawlessly across mobile and desktop devices so that you don’t miss any sales opportunities.

Method 2: Install Sticky Add to Cart Shopify Code

You can also manually add the sticky add to cart button Shopify code. It requires basic coding skills and technical knowledge.

Here’s how you can manually add the Sticky Add-to-cart button in Shopify:

Go to Shopify admin, click on Sales Channels > Online Store > Themes.

On the Shopify theme page, click right side three-dots {•••} and click ‘Edit Code.’

It will open the Shopify theme editor.

In the Snippets directory, click ‘Add a new snippet‘ and create a new liquid file named ‘meetanshi-add-to-cart-sticky’

Now, paste the following sticky add to cart button Shopify code:

{% if template contains 'product' %}
<style>
  #meetanshi-addtocart-sticky {
    position: fixed;
    bottom: 20px; /* Add margin to the bottom */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background: #fff;
    z-index: 9999;
    text-align: center;
    padding: 10px;
    border: 1px solid #e2e2e2; /* Add a border around the entire div */
    width: auto; /* Adjust the width to fit content */
  }
 
  #meetanshi-addtocart-sticky select,
  #meetanshi-addtocart-sticky input,
  #meetanshi-addtocart-sticky button {
    height: 40px;
    margin: 0 5px;
    vertical-align: middle;
  }
 
  #meetanshi-addtocart-sticky input {
    width: 60px;
    text-align: center;
  }
 
  #meetanshi-addtocart-sticky button {
    padding: 0 10px;
    background-color: #007bff; /* Change the button background color */
    color: #fff; /* Change the button text color */
    border: none; /* Remove the button border */
    cursor: pointer; /* Add a pointer cursor */
  }
</style>
 
<div id="meetanshi-addtocart-sticky">
  <div>
    <strong>{{ product.title }}</strong> ({{ product.price | money }}) <!-- Display product name and price -->
  </div>
  <form action="/cart/add" method="post">
    <select name="id">
      {% for variant in product.variants %}
      <option value="{{variant.id}}">{{variant.title}}</option>
      {% endfor %}
    </select>
    <input type="number" name="quantity" value="1" min="1">
    <button type="submit" class="btn btn-small">Add To Cart</button>
  </form>
</div>
{% endif %}

And click “Save.”

Now, open the theme.liquid file and add the following code before the </body> closing tag:

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

Click “Save.”

That’s it! Your Sticky Add to Cart button is added in your Shopify.

Here’s how it looks like:

Get More Conversions with Sticky Add to Cart

Sticky add to cart in Shopify helps can improve the user experience and make it easy for customers to purchase products.

You can use our no-code solution to implement this feature in your store and start getting more conversions.