June 15, 2021 in E-Commerce, Tips and Tricks
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>
