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.

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

2 Replies to How To Create A Sticky Add To Cart On Shopify

    1. Hi Antonis,

      You can, you need to do a bit of Javascript, when the ‘real atc’ is in the field of view, then hide the sticky atc, and reveal while it’s not in the field of view.

Leave a Reply

Your email address will not be published.