Adding a cart button and variant selector on collections page to your Shopify store’s. In this post, I’ll show you how to do it!
Adding a cart button and variant selector to Shopify’s collections page can be tricky, but not with this helpful post!
In just a few minutes you can set it up so customers can easily add items from your collections to their carts.
Add the following code in line no. 121 of main-collection-product-grid.liquid or product-grid-item.liquid file:
{% if request.page_type == ‘collection’ %}
{% if product.variants.size > 1 %}
<div class=”variant-drop-down”>
<form action=”/cart/add” method=”post” enctype=”multipart/form-data” id=”add-to-cart-{{ product.handle }}” onsubmit=”return addToCart(event)”>
<fieldset class=”variant-input-wrap”>
{% for variant in product.variants %}
{% if variant.available %}
<div class=”variant-input” data-index=”option1″ data-value=”{{ variant.title }}”>
<input type=”radio” value=”{{ variant.id }}” name=”id” id=”VariantSelect-{{ variant.id }}-option-size-{{ variant.title }}” required>
<label for=”VariantSelect-{{ variant.id }}-option-size-{{ variant.title }}” class=”variant__button-label”>{{ variant.title }}</label>
</div>
{% else %}
<div class=”variant-input disabled” data-index=”option1″ data-value=”{{ variant.title }}”>
<label for=”VariantSelect-{{ variant.id }}-option-size-{{ variant.title }}” class=”variant__button-label disabled” disabled=”disabled”>{{ variant.title }}</label>
</div>
{% endif %}
{% endfor %}
</fieldset>
{% comment %}{% if product.selected_or_first_available_variant.available%}ADD TO CART{% else %}Sold Out{% endif%} class=”btn” {% unless product.variants.first.available %}disabled{% endunless %}”{% endcomment %}
<input type=”submit” value=”ADD TO CART” class=”btn” /><br> <br>
</form></div>
{% endif %}
{% endif %}
{% if product.has_only_default_variant %}
<form method=”post” action=”/cart/add” onsubmit=”return addToCart(event)”>
<input type=”hidden” name=”id” value=”{{ product.variants.first.id }}” />
<input type=”submit” value=”ADD TO CART” class=”btn” />
</form>
{% endif %}
Add the following code to the bottom of your Liquid file. This js code for open the cart drawer:
<script>
function addToCart(event) {
event.preventDefault(); // Prevent the default form submission
const form = event.target;
const formData = new FormData(form);
fetch(‘/cart/add.js’, {
method: ‘POST’,
body: formData,
headers: {
‘Accept’: ‘application/json’,
},
})
.then(response => response.json())
.then(data => {
console.log(‘Item added to cart:’, data);
var cart = new theme.CartDrawer
cart.init()
cart.open();
})
.catch((error) => {
console.error(‘Error adding to cart:’, error);
});
}
</script>
Add following code on bottom of your CSS file:
<style>
.collection-content .variant-input-wrap {
margin: 0 0px 5px;
}
.collection-content .variant-input-wrap label {
margin: 0;
width: 100%;
height: 100%;
line-height: 25px;
min-width: 30px;
padding: 0;
display: block;
min-height: 24px;
text-align: center;
font-size: .85em;
background: #ffffff;
}
.collection-grid__wrapper form input[type=submit] {
font-size: 12px;
padding: 7px 8px;
}
.variant-drop-down{text-align:center;}
</style>
