how to show product variant as radio button replace of the select box in debut theme

ErSanjay
Trailblazer
174 19 24

 I try to show replace select box to radio button but the selected current variant not added to the cart 


I try this  code snnipest from shopify github link https://shopify.github.io/liquid-code-examples/example/product-variant-selector

T
hanks in advance for help 

0 Likes
shoppify-dev
Tourist
5 0 2

To change the dropdown selector in debut theme with radio buttons, you can use this:
Replace the { % unless ... %} in { % form 'product'... %}  with this snippet

 

{% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                  {{ option.name }}
                </label>
                {% assign option_position = forloop.index %}
                <fieldset>
                  {%- for value in option.values -%}
                      <input type="radio" class="single-option-selector-{{ section.id }} "
                        {% if option.selected_value == value %} checked="checked"{% endif %}
                        value="{{ value | escape }}"
                        data-index="option{{option_position}}"
                        name="{{ option.name | handleize }}"
                        id="SingleOptionSelector-{{option_position}}">
                      <label for="SingleOptionSelector-{{ forloop.index0 }}">
                        {{value}}
                      </label>
                  {%- endfor -%}
                </fieldset>
              {% endfor %}
            {% endunless %}

 

 

If helpful, please Like and Accept the solution

ErSanjay
Trailblazer
174 19 24

@shoppify-dev   have tested it ? 

current variant not added to the cart    this is issue i am facing

0 Likes
shoppify-dev
Tourist
5 0 2

@ErSanjay Yes this is running live on my site. It's tested and works properly.

0 Likes
Rashmi4
New Member
1 0 0

Thank-you So much for this...
this ode work properly in my store.

0 Likes