Show Products within a Collection with Variant to Cart Buttons
This technique was first used on the Matador Records homepage and shows a collection with the product variants as "cart buttons". The product variants are then added to cart dynamically through ajax. Make sure ajax is turned on from the cart settings menu.
1). Create featured-list-collection.liquid snippet with the following code:
{% unless product.title == excluded_product_1 %}
<div class="artist__collection">
<a href="{{ product.url | within: collection }}">
{% for image in product.images %}
<div class="artist__collection--left">
<img class="home-artist__collection--graphic" src="{{ image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />
</div>
{% endfor %}
</a>
<div class="artist__collection--right">
<a href="{{ product.url | within: collection }}">
<h3 class="product-name">
{{ product.title | truncatewords:7 }}
</h3>
</a>
<h4 class="vendor">
by: {{ product.vendor | link_to_vendor }}
</h4>
{% include 'variant-price' %}
</div>
</div>
{% endunless %}
2). Create the variant-price.liquid snippet and add the following code:
<div class="variant-price mat-variant">
{% if product.variants.size > 0 %}
{% for variant in product.variants %}
<!--<a href="/cart/{{variant.id}}:1">
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
</a>-->
<form id="" action="/cart/add" method="post" role="form" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ variant.id }}" />
<input type="hidden" name="quantity" value="1" />
<button type="submit" name="add" id="purchase" class="mat-cart-btn">{{ variant.title }} - {{ variant.price | money }}</button>
</form>
{% endfor %}
{% else %}
{% endif %}
</div>