Displaying variants options in collection page shopify - html

Question

I know this question was asked million times on the internet but it seems like everyone wants to have a solution with their own twist. I can't find what I need exactly.
So I used this code to display variants on my collection and then to add to cart.
<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="Add to cart" class="btn" />
</form>
This works but in the dropdown, it gives it to me like this:
xs / Black - $72.00
small / Black - $61.00
medium / Black - $52.00
large / Black - $74.00
xl / Black - $77.00
xxl / Black - $55.00
xs / Blue - $72.00
small / Blue - $72.00
medium / Blue - $72.00
xl / Blue - $72.00
xxl / Blue - $72.00
What I want is for the customer to select size and color separately in different dropdowns and then click add to cart.
I was looking everywhere on how to do this with no luck. Please help.
My Shopify theme is Debut if it helps.

Answer 1

To obtain it in separate blocks, you must iterate on the product options, which are maximum 3, so you can show size and color separately.
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden"
{% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select style="display:block" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}

Answer 2

You can do something like this:
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id" id="{{ product.handle }}" style="display: none;">
{% 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="Add to cart" class="btn" />
</form>
And you add the script at the end of the page:
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
for(curr_product in all_products){
new Shopify.OptionSelectors(curr_product, {
product: all_products[curr_product]
});
}
</script>
We are relying on the Shopify function new Shopify.OptionSelectors that will split each select in a separate selects. Don't forget to add the id="{{ product.handle }}" to the main select.
Whole code:
{%- for product in collection.products -%}
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id" id="{{ product.handle }}" style="display: none;">
{% 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="Add to cart" class="btn" />
</form>
{% endfor %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
for(curr_product in all_products){
new Shopify.OptionSelectors(curr_product, {
product: all_products[curr_product]
});
}
</script>