Multiple Variant Selects on Collection Page

Shopify Expert
62 1 9

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 1 341

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" />


15 0 3

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

New Member
4 0 0


am having exact same issue with size variant. i am not allowed to select the variant, as soon as ı opened the dropdown it goes to product page. did you manage to find a fix in your case? 


thanks in advance