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

Highlighted
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.

 

Capture.PNG

 

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 option.name == 'default' %}class="label--hidden" {% endif %}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 %}

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

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 :)

0 Likes
Highlighted
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 bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes