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: http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-o...

I've had a long search and found one similar, unanswered post: https://ecommerce.shopify.com/c/ecommerce-design/t/updating-price-on-page-with-multiple-select-boxes... 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!

0 Likes
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: https://themes.shopify.com/designers/out-of-the-sandbox. 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.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
  </select>
  <input type="submit" value="Buy now" />
</form>

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Tourist
6 0 1

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

0 Likes