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

ErSanjay
Shopify Partner
293 20 42

 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 

Business Owner & Shopify app developer - shopify consting - Full Stack Sofware Engineer
Er Sanjay
Replies 11 (11)

shoppify-dev
Tourist
5 0 6

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
Shopify Partner
293 20 42

@shoppify-dev   have tested it ? 

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

Business Owner & Shopify app developer - shopify consting - Full Stack Sofware Engineer
Er Sanjay
shoppify-dev
Tourist
5 0 6

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

Rashmi4
Shopify Partner
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

stickerlight
New Member
4 0 0

boop

stickerlight
New Member
4 0 0

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

Giants_Fan
Excursionist
30 0 8

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

Vanessacotore
Visitor
2 0 0

Êtes vous prêt de payer mes iPhones ??

TheFabarsenal
Tourist
3 0 1

Thank you so much. I tried following the Swatch tutorial and that NEVER worked, but this was simple and worked brilliantly. Is there a way to make all the options one column?