add to cart on collection page shopify

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>


Leave a Reply