Add add to cart and button variant selector in collection page

I have edited my store to have an add to cart button and variant selector in the collection page and it's working. But my boss want another change, how can I change the dropdown list to button selector?

My code form

{% unless sold_out %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="product-form-{{ product.id }}" >
<div  style="margin-top:0px; margin-bottom: 10px;">
<button type="submit" name="add" >
<span id="AddToCartText">Add to Order</span>
</button>
</div>


{% if product.variants.size == 1 %}
<input type="hidden" id="variant-select" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<div > 

<select name="id" id="productSelect" >
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form> 
{% endunless %}

Please advise.

Thank you!

CodePudding user response：

You could change the select element to a radio button element and style the radios as regular buttons. This pattern is fairly common, you just need to make sure your event listener target for the variant selection is the same as you have now.