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

ErSanjay
Trailblazer
181 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 5

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
181 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 5

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

Rashmi4
New Member
1 0 1

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

stickerlight
New Member
4 0 0

this is working great, thanks!

how can I add linebreaks inbetween options so that they don't show up so bunched up like in this image?
Screen Shot 2021-08-17 at 04.04.13.png

0 Likes
stickerlight
New Member
4 0 0

boop

0 Likes
stickerlight
New Member
4 0 0

i just paid someone on fiver $30 to get it all working for me

0 Likes
Giants_Fan
New Member
16 0 0

Trying to make this work for the supply theme.  I am able to get the radio buttons on there, but the dropdowns are still there and I'm not sure what to do now.  Here is my url, https://nationalsignsource.com/collections/customizable-signs/products/rectangle-stickers-customize-...

0 Likes