Multiple Variant Selects on Collection Page

Shopify Expert
52 1 5

I'm trying to add a feature to a custom site which will add the ability to select and purchase a product from multiple variant selectors on a collection make like this tutorial explains for the product page:

I've had a long search and found one similar, unanswered post: and I haven't been able to find a theme that has this feature to learn from, so I thought I might ask here again in the hopes that a solution has be found for this.

Thanks in advance for any help!

Shopify Staff
Shopify Staff
5704 0 287

Hi Timd!

All themes by Out of the Sandbox have that feature, so you may just want to use one of their beautiful themes: The add to cart form on collection pages, which does let you pick options, is shown in a quick view type of box on the collection page.

You don't need to use product options though. It can get simple if you use one single variant drop-down. In your collection template, you can simply use something like this for each product:

<form action="/cart/add" method="post" style="text-align:center;">
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
  <input type="submit" value="Buy now" />


Caroline from ∴ mllegeorgesand AT gmail DOT com
6 0 1

This is working good. But it is redirecting to product page, help me with this.