Hi,
You can try making this change to the code of the product-template-liquid file in your sections folder:
Find the line starting with {%unless at around line 162 for Debut theme:
{% unless product.has_only_default_variant %}
and ending with the matching {% endunless %} at line 180, and replace with this code:
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
{% if option.name == "Title" %}
<label>{{ option.name }}</label>
{% assign index = forloop.index %}
<div class="team-swatch">
{% 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 class="single-option-selector-{{ section.id }}"
id="title-{{forloop.index}}"
type="radio"
name="title"
value="{{ value | escape }}"
data-index="option{{ index }}"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
/>
<label for="title-{{forloop.index}}">{{value}}</label>
{% endfor %}
</div>
{% else %}
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
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>
{% endif %}
</div>
{% endfor %}
{% endunless %}
Then, in your theme.css in the assets folder, add these styles to the end (change to suit your site):
.team-swatch{
display: flex;
flex-wrap: wrap;
}
.team-swatch input{
opacity: 0;
width: 0;
height: 0;
}
.team-swatch label{
padding:1em;
margin:0 5px 5px 0;
border: 1px solid lightgray;
}
.team-swatch input:disabled + label {
opacity: 0.35;
cursor: default;
text-decoration: line-through;
}
.team-swatch input:checked + label {
box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em green;
}
.team-swatch input:focus + label {
box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em green;
}
