How to add “Add to cart” button on Shopify collection pages for each product

You can create an “Add to cart” button that features a single product that includes one or all of the product’s variants on your collection pages. This will allow your clients to easily and effortlessly add products to cart without opening the product page.

Please follow below steps to add “Add to cart” button on Shopify collection pages for each product.

1. From your Shopify admin, to to Online Store > Theme.
2. Find the theme you want to edit and then click Action > Edit code.
3. In the online code editor of collection page find to the loop {% for product in collection.products %} add the below code.
   
   <form action="/cart/add" method="post"> {% if product.variants.size == 1 %} <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {% else %} <select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select> {% endif %} <div><button type="submit" name="add">Add to cart</button></div> </form>

   1 2 3 4 5 6 7 8

   <form action="/cart/add" method="post"> {% if product.variants.size == 1 %} <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> {% else %} <select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select> {% endif %} <div><button type="submit" name="add">Add to cart</button></div>   </form>

4. Hit Save, and you’re done!

Happy coding!