Shopify

How To Create A Sticky Add To Cart On Shopify

Looking to create a sticky add to cart on your Shopify store? Look no further and follow this guide!

Click here to view our example store

Got a long product page and need to add a sticky add to cart to allow your customers to add your products without having to scroll all the way back up? Just follow this guide for a FREE way to add this functionality to your Shopify store.

Let’s get into it.


First, you need to locate your Shopify add to cart form, within your product page. Depending on the theme you are using, it could take you a bit of time to find, especially if you are learning about your theme code for the first time. To give 2 example, the Debut theme, the add to cart is located in the product-template.liquid. On the Dawn theme, it’s located in the main-product.liquid.

When you find the add to cart section, copy and paste the same code right under your add to cart. You will essentially see 2 add to carts on your shopify store.

Now that you have 2 add to cart buttons, the one you just created, add an id called sticky-atc.

Before:

<button
  type="submit"
  name="add"
  class="product-form__submit  

After:


<button
  type="submit"
  name="add"
  id="sticky-atc"
  class="product-form__submit  

Go to your main css file, in this case we are using the Dawn theme, so the main css file is base.css, at the end of the file paste the below code.

#sticky-atc {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  /* Add "background: #000;" to change the colour of your ATC button*/
  /* Add "color: #fff;" to change the colour of your ATC text*/
}

And you’re done, you now have a free sticky add to cart on your product page.

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Dawn theme, downloaded on 28th of October, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *