How to create Sticky Add To Cart Button in Shopify Product Page without app

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:
  
  {% 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 %}

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

  {% 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>):
  
  {% include 'addtocart-sticky' %}

  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.