How can I have different type of selectors (radio, and dropdown) denpending on the variant?
this is the code I have tried so far but still can’t get it to work
{%- for option in product.options_with_values -%}
{%- if option.name == 'Color' -%}
<variant-radios
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{{ block.shopify_attributes }}
>
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input
type="radio"
id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="{{ product_form_id }}"
{% if option.selected_value == value %}
checked
{% endif %}
>
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%else%}
<variant-selects
class="no-js-hidden"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
{{ block.shopify_attributes }}
>
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select
id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="{{ product_form_id }}"
>
{%- for value in option.values -%}
<option
value="{{ value | escape }}"
{% if option.selected_value == value %}
selected="selected"
{% endif %}
>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{% endif %}
{% endfor %}
<!-- -->