How to add to cart button on collection page Shopify

Add the following lines of code at the bottom of the page. All you have to do is to copy these lines of codes and paste it at the bottom of the product-card-grid.liquid page.

<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
{% if product.variants.size > 1 %}
  <select id="product-select-{{ product.id }}" name='id' class="text-center">
  {% for variant in product.variants %}
  {% if variant.available %}
    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}</option>
  {% else %}
    <option disabled="disabled">
    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
    </option>
  {% endif %}
  {% endfor %}
  </select>
  {% else %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  {% endif %}

  {% if product.available %}
    <button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button>
  {% else %}
    <h6>Out of Stock</h6>
  {% endif %}
</form>

Leave a Reply