Debut theme - change dropdown menu for product variations to radio\buttons

New Member
1 0 0

Hi guys, I'd like to convert <select> into <input type ="radio"> type of buttons. I'm using the Debut theme.




But I'm having some troubles.


I've tried playing a lot with the product-template.liquid file, but actually today is my first day of experimenting with Liquid and I just don't know what I'm doing. I found here and there some solutions, but none of them work. This also doesn't work. Here is the (original) code for this section:


            {% 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 {% if == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                    {{ }}
                  <select class="single-option-selector single-option-selector-{{ }} 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 %}
              {% endfor %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
              {% endfor %}

I actually managed once to show radio buttons by copy-pasting one solution, but I'm not familiar with IDs and variables and I had issues later when I actually added the selected item to the cart. No matter what I've selected, only one variant got added. Also the description, price and picture should change accordingly, but they didn't. 


I found out that actually the second <select> acts as a clone of the first and is hidden with CSS. It's the one used for the cart. So selecting items from the first (visible) <select> changes: the image, the description, the price and the dropdown item from the hidden menu, while the cloned dropdown menu is only used for the cart. I hope I make sense lol.


How do I go about converting this to buttons? Basically I have two product variants and in a perfect world there would be two buttons on top of the 'Add to cart' button. I'd appreciate your help very much. Thanks :)

Shopify Partner
887 120 156

Hello, @tervel 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Expert | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing