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.
2 Replies to How To Create A Sticky Add To Cart On Shopify
How to make the sticky atc button visible only when the real atc button is not together?
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.
How To Create A Sticky Add To Cart On Shopify
How to Create a Product Image Slider on Dawn Theme
How to Create a Featured Product Slider on Shopfiy
How To Make Dawn Theme Header Transparent
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent