How To Add Buttons in Variant Selector on Debut Theme

Adding buttons to your variant selector is a great way to make it easy for customers to find the options they’re looking for. In this video, we’ll show you how to add buttons in the variant selector on the Debut theme.

Buttons in Variant Selector are a great way to personalize your shop and make it stand out from the competition. In this video, I’ll show you how to add buttons in Variant Selector on the Debut theme.

Replace code in product-template.liquid

Replace following code

{% unless product.has_only_default_variant %}
              <div class="product-form__controls-group">
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select 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 %}
              </div>
            {% endunless %}

With following code:

{% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                  {{ option.name }}
                </label>
                {% assign option_position = forloop.index %}
                <fieldset>
                  {%- for value in option.values -%}
                      <input type="radio" class="single-option-selector-{{ section.id }} "
                        {% if option.selected_value == value %} checked="checked"{% endif %}
                        value="{{ value | escape }}"
                        data-index="option{{option_position}}"
                        name="{{ option.name | handleize }}"
                   id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                      <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                        {{value}}
                      </label>
                  {%- endfor -%}
                </fieldset>
              {% endfor %}
            {% endunless %}

Add code in CSS file

Add the following code in theme.css file

.product-form input[type=radio]+label {
    background-color: white;
    border-radius: 20px;
    border: 1px solid;
    color: black;
    display: inline-block;
    margin: 0.7rem 0.5rem 0.2rem 0;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    letter-spacing: .1rem;
    line-height: 1;
    text-align: center;
    transition: border var(--duration-short) ease;
    cursor: pointer;
    position: relative; }

.product-form input[type=radio]:checked+label {
    background-color: black;
    color: white;
}
	
.product-form input[type=radio] {
   clip: rect(0,0,0,0);
    overflow: hidden;
    position: absolute;
    height: 1px;
    width: 1px;
}