How to create Sticky Add To Cart Button in Shopify Product Page without app
Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy 3 months of Shopify for $1/month on select plans.
I’ve written an article to introduce you to the best Shopify apps to help you make sticky add to cart button. If you’re more technical, you may want to do this manually. This article will guide you how to create a sticky Add To Cart button on the product page without the app.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Snippets directory, click Add a new snippet.
- Add the following lines of code:12345678910111213141516171819202122232425262728293031323334353637383940{% if template contains 'product' %}<div id="huratips-addtocart-sticky"><form action="/cart/add" method="post"><select name="id">{% for variant in product.variants %}<option value="{{variant.id}}">{{variant.title}}</option>{% endfor %}</select><input type="number" name="quantity" value="1" min="1"><button type="submit">Add To Cart</button></form></div><style>#huratips-addtocart-sticky{display: flex;justify-content: center;position: fixed;bottom: 0;width: 100%;z-index: 9999;background: #fff;padding-top: 5px;border-top: 1px solid #e2e2e2;}#huratips-addtocart-sticky select,#huratips-addtocart-sticky input,#huratips-addtocart-sticky button{height:40px;margin:0 5px;vertical-align: middle;}#huratips-addtocart-sticky input{width: 60px;text-align: center;}#huratips-addtocart-sticky button{padding:0 10px;}</style>{% endif %}
- Click Save and close it.
- In the Layout directory, click theme.liquid to open.
- Add the following code above the closing body tag (</body>):1{% include 'addtocart-sticky' %}
- Click Save and you are done.
Keep in mind that this guide is basic. If you want it to be more professional and beautiful, then you have to further customize the code for it.
Please can you tell me how to not show the Sticky bar when the original add to cart button is visible on windows?
Thank you so much
Doesn’t work on mine – shows Liquid error: Could not find asset snippets/addtocart-sticky.liquid
I use Debutify, maybe that is the issue, but dunno if it depends on the particular theme.
you have to name the snippet “addtocart-sticky”
Perfect!! Thank you!
Thank you so much your code is very helpful
It keeps saying default title not the product name
Hi Mate, thanks so much for this.
How would I change the font and colour on the button?
The issue is that if I change it on Theme Settings it makes the cart and menu option white as well.
Thanks
Any chance to get this on mobile version?