Add the Sticky "Add to Cart" Button in Shopify in 5 Minutes

Anyone can create the sticky add to cart button in Shopify in five minutes, depending on whether you choose to code yourself or integrate an app.

Head and shoulders photo of Jessica Hughes
By Jessica Hughes
Head and shoulders photo of Michelle Meyer
Edited by Michelle Meyer

Updated July 19, 2023.

The sticky "Add to Cart" is a bar or button that remains at the top or bottom of the screen while your shopper peruses your Shopify store.

Therefore, it stays within easy reach of your shopper and no longer requires them to scroll back to the main "Add to Cart" button, breaking their concentration while shopping. This function enhances user experience and complements other customer functions, such as adding a back-in-stock notification form or creating custom filters.

Ways to Integrate the "Add to Cart" Button

There are various methods to integrate the sticky "Add to Cart" button into your Shopify store. Some of them are using an app or coding it yourself.

Method 1: Integrate an App

If you choose to integrate an app, it will take you less than five minutes. Simply search the app store, select the relevant app, add it to your Shopify store, and you're good to go.

Sticky Add To Cart BOOSTER PRO is one of the top-rated apps with 4.9 stars out of 1601 reviews (as of July 2023), proving that it's one of the best apps on the store. It has a 14-day free trial, with a Sticky Checkout Bar included to make adding to cart and checking out a seamless experience for your customers.

Method 2: Code Your Own

There are a few steps to follow if you decide to code your own sticky "Add to Cart" button for your Shopify store:

1. Locate the Shopify "Add to Cart" form on the product page

Different themes locate the form in different places. For example, the Debut theme locates it in product-template.liquid, while the Dawn theme locates it in main-product.liquid.

2. Copy the original code

Paste it a second time beneath the first entry. You might see two of the same "Add to Cart" buttons in your Shopify store, which is absolutely fine.

3. Add an ID called "sticky-atc"

The code should look like this:


4. Add the code in the theme.css file

If you're using the Dawn theme, for example, you'll find the main CSS file in base.css. At the end of the base.css file, paste the following code:

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

Do It Your Way

Anyone can create the sticky "Add to Cart" button for Shopify. Integrating apps will certainly be easier for some than coding, but whatever you choose, it will be a quick and painless procedure, guaranteed.

Don't Know what Shopify is?

Start your own online eCommerce business using Shopify platform. Shopify gives you all the tools needed to make the journey easier, faster and more profitable.

Frequent Releases

We work tirelessly to deliver more value to your business. Our roadmap is largely based on the questions you ask. We listen and we deliver as often as we can.

24/7/365 apps support

You can reach out to us via a dedicated support icon in the apps. We're always there. Or simply send us an email with your questions at

Pin It on Pinterest