A sticky add to cart button for Shopify, without an app
On long product pages the add-to-cart button scrolls out of sight. The Sticky ATC snippet adds a floating button that appears exactly then, shows the price and uses your theme’s own add-to-cart, so variants and your cart work as before.
Free account · 2 credits to start · No card needed
| Button style | Glass |
| Show price in button | On |
| Hide when theme’s button is visible | On |
| Added confirmation text | Added |
| Sold out text | Sold out |
The button disappears right when people decide
Photos, descriptions and reviews push the add-to-cart button off the screen, most of all on phones.
Long pages hide the button
Shoppers scroll down to read details and reviews. By the time they’re convinced, the button is far above them.
Every scroll back is a pause
Having to find the button again gives a shopper time to hesitate, compare or close the tab.
One tap from anywhere
A sticky button keeps the next step in reach wherever the shopper is on the page.
A sticky button that behaves like your own
Everything you can set in the snippet.
Appears when it’s needed
It slides in once your theme’s add-to-cart button has scrolled out of view, and hides when that button is back on screen (you can turn this off).
Uses your theme’s cart
Clicks go through your theme’s product form: the chosen variant and quantity, your cart drawer or cart page, as before.
Price on the button
Optional, and it follows the selected variant.
Clear states, your words
Your own texts for the button, the “Added” confirmation, “Please choose your variant” and “Sold out”.
Five styles
Glass, a bold dark pill, a soft white pill, your own colors, or your theme’s own button style.
Phone and desktop
Full width on phones, a floating button on bigger screens. It hides near the end of the page.
Put the price inside the button
A second snippet for the button that’s already there.
Price in ATC Button writes the selected variant’s price into your theme’s existing add-to-cart button, like “Add to cart - $49.00”. No second button is created, and the price updates when the shopper switches variant. If the product is on sale, it can show the compare-at price too.
Together with the sticky button, the price is visible wherever the shopper is on the page.
Add a sticky add to cart button in three steps
- 1
Choose the style
Pick one of the five styles, set the texts and decide whether the price shows. The preview shows the result.
- 2
Copy the code
Copy the generated Liquid. One snippet, nothing to install.
- 3
Paste it into your product page
In the theme editor, add a Custom Liquid block to your product page, paste the code and save.
How to add a sticky add to cart button in Shopify
Your options, and what a good sticky button does.
1. Look in your theme settings
Some themes have a sticky add-to-cart option on the product page. If yours does, try it first. If not, you have three ways to add one.
2. Code it yourself
A sticky button needs more than a fixed-position button: it has to know when the original button is off screen, follow the selected variant, handle sold-out variants and hand the click to your theme’s cart. It’s doable, but it’s code you maintain.
3. Install an app, or paste a snippet
Sticky cart apps do it for you, usually with their own bar design and their own script. The snippet does the same with code in your theme that you set up once.
What a good sticky button does
- It only shows once the original button is out of view, so there are never two buttons on screen.
- It keeps the price in sight, so shoppers don’t have to scroll up to check it.
- It respects the variant: no surprise when the wrong size lands in the cart.
- It looks like your shop, not like a plugin.
| Sticky cart app | Sticky ATC snippet | |
|---|---|---|
| Where it lives | In the app, loaded by its script | In your theme’s code |
| Cost | Free plan or a monthly fee | No subscription |
| Adds to cart via | Depends on the app | Your theme’s own product form |
| If you stop using it | The button goes away | The button stays in your theme |
Before you add it
It needs your theme’s add-to-cart form. The sticky button works with the standard product form that Shopify themes use on product pages. It’s made for product pages.
One sticky bar is enough. If your theme or an app already shows one, switch that off before adding the snippet.
Questions, answered
What is a sticky add to cart button?
A button that stays on screen while shoppers scroll down a product page, so they can add the product to the cart without scrolling back up to the original button.
Does my theme already have one?
Some themes include a sticky add-to-cart option in the product page settings. Check the theme editor first. If your theme doesn’t have one, the snippet adds it. If it does, use one of the two, not both.
Does it work with variants?
Yes. The button uses your theme’s own product form, so the variant and quantity the shopper picked are the ones that go into the cart. If no variant is chosen yet, it says so (“Please choose your variant”, or your own text), and it shows “Sold out” when the variant is unavailable.
Will it break my cart drawer?
It shouldn’t: the sticky button doesn’t add products on its own, it hands the click to your theme’s add-to-cart. Whatever your theme does after that, opening a cart drawer or going to the cart page, still happens.
Does it show on desktop too?
Yes. On phones it spans the width of the screen; on bigger screens it’s a floating button. It appears once the theme’s button has scrolled out of view and hides again near the end of the page.
Can I set it up on my phone?
The editor needs a bigger screen. On a phone, you can email yourself the link and continue on your computer.
Do I need to code?
No. You choose the style and texts in a visual editor, copy the code and paste it into a Custom Liquid block on your product page.
What does it cost?
You can browse and customise every snippet without an account. Copying the code needs a free account, which comes with 2 credits and no card. After that you top up credits when you need them: no subscription, and credits never expire.
Keep the add-to-cart button in reach
Choose a style, set your texts and paste the code into your theme. No app to install.
Free account · 2 credits to start · No card needed. Already have an account? Sign in