How To Create A Sticky Add To Cart On Shopify

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.

Add The Add To Cart Button

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  

Add Code in Theme.css

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.