Cart button and variant selector on collection page shopify

PHOTO EMBED

Wed Aug 24 2022 09:14:00 GMT+0000 (Coordinated Universal Time)

Saved by @websensepro #cartbutton #collectionpage #variantselector #shopify

{% if request.page_type == 'collection' %}
{% if product.variants.size > 1 %}
<div class="variant-drop-down">
<form action="/cart/add" method="post" >
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select><br>
<input type="submit" value="Buy now" class="variant-button" /><br> <br>
</form></div>
{% endif %}
{% endif %}

{% if product.has_only_default_variant %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Buy now" class="variant-button" />
</form>
{% endif %}
content_copyCOPY

https://websensepro.com/blog/how-to-add-cart-button-and-variant-selector-on-collection-page-of-shopify/