Hey Community, I’m working on product options and i want to show my colors and buttons and size as dropdown. I’m using dawn theme default radio and select selectors. When i add only single option(color or size) it works good as color shows in buttons and size shows in dropdown. But when i use both options in my product page both options didn’t work and my “add to cart button” shows unavailable. I have attached my code of variants. Please let me know if anyone can help
{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.show_variants == true -%}
{%- for option in product.options_with_values -%}
{% if product.options.size > 1 -%}
{% 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 }}">
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
{% endif %}
{% endfor %}
{% endif %}
{%- endunless -%}