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

Highlighted
New Member
1 0 1

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

Highlighted
Shopify Partner
9527 1200 3351

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
Highlighted
Shopify Expert
69 2 6

@tervel   you add this code  into your product template.

 

 {% comment %} start box input  {% endcomment%}
  {%- unless product.has_only_default_variant -%}
  {%- for option in product.options_with_values -%}

    {%- if section.settings.product_selector == 'radio' -%}
     
    {%- else -%}
     
    {%- endif -%}

    <fieldset id="ProductSelect-option-{{ forloop.index0 }}" name="{{ option.name | handleize }}">
      <legend>
        {{ option.name | escape }}
      </legend>
      {%- for value in option.values -%}
        <!-- Check to see if there's a product size option. If there is a size, check to see if there's any availble for purchase. If not, set the variat control in a "disabled" state. -->
        {%- assign variant_label_state = true -%}

        {%- if product.options.size == 1 -%}
          {%- unless product.variants[forloop.index0].available -%}
            {%- assign variant_label_state = false -%}
          {%- endunless -%}
        {%- endif -%}

        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          {% unless variant_label_state %} disabled="disabled"{% endunless %}
          value="{{ value | escape }}"
          data-index="option{{ forloop.index }}"
          name="{{ option.name | handleize }}"
          id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
        <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
          {{ value | escape }}
        </label>
      {%- endfor -%}
    </fieldset>



  {%- endfor -%}
{%- endunless -%}

 {%- comment -%} end {%- endcomment -%}

 

0 Likes