Simple way to change variant from a dropdown to buttons? Debut theme.

[Hudson10]

I haven't seen any solution for this in the community. Would love to make this change to expose all my item variants as buttons. 

[john12]

The most recent version of Debut successfully updates variants on inputs with the class name single-option-selector. I have working radio buttons based on a metafield ( product.metafields.product_selector.type == 'radio' ). No need for js customizations. Just customize how it looks with css, but don't use css to target the single-option-selector class.

{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
  {% for option in product.options_with_values %}
  {% assign i = forloop.index %}
  {% assign i0 = forloop.index0 %}

  {% if product.metafields.product_selector.type == 'radio' %}
    <fieldset class="product-form__controls-group" 
      id="SingleOptionSelector-{{ i0 }}" 
    >
    <legend>{{ option.name }}</legend>
      {%- for value in option.values -%}
      {%- assign variant_label_state = true -%}
      {%- if product.options.size == 1 -%}
        {%- unless product.variants[forloop.index0].available -%}
          {%- assign variant_label_state = false -%}
        {%- endunless -%}
      {%- endif -%}

      <input type="radio" 
          class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          {% unless variant_label_state %} disabled="disabled"{% endunless %}
          value="{{ value | escape }}"
          data-index="option{{ i }}"
          name="{{ option.name | handleize }}"
          id="SingleOptionSelector-{{ option.name | handleize }}-{{ value | escape }}"
      >
          <label for="SingleOptionSelector-{{ option.name | handleize }}-{{ value | escape }}">
            {{ value }}
          </label>
      {%- endfor -%}
    </fieldset>
  {% else %}
    <div class="selector-wrapper js product-form__item">
      <label for="SingleOptionSelector-{{ i0 }}">
        {{ option.name }}
      </label>
      <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
         id="SingleOptionSelector-{{ i0 }}"
         data-index="option{{ i }}"
       >
        {% for value in option.values %}
        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
        {% endfor %}
      </select>
    </div>
  {% endif %}
                
  {% endfor %}
</div>
{% endunless %}

[infinite_ars]

Could you specify where to add this code?