How To Add Cart Button and Variant Selector on Collection Page of Shopify

Adding a cart button and variant selector on the collection page of your Shopify store can be really helpful for your customers. In this post, I’ll show you how to do it!

Adding a cart button and variant selector on the collection page of Shopify can be tricky, but not with this helpful post! In just a few minutes you’ll know how to set it up so that customers can easily add items from your collection to their carts.

Add the following code in line no. 121 of main-collection-product-grid.liquid file:

{% 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 %}

Add following code on bottom of your CSS file:

.card-wrapper {
height: auto!important;
}

.variant-drop-down {
display:block !important;
}

.variant-button {
background-color: black;
color: white;
padding: 5px;
border-radius: 5px;
margin-top: 5px;
}

.variant-button:hover {
background-color: white;
color: black;
cursor: pointer;
}