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

[ErSanjay]

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 Product variant selector | Shopify Liquid code examples

Thanks in advance for help

[shoppify-dev]

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 %}
                
                {% assign option_position = forloop.index %}
                
              {% endfor %}
            {% endunless %}

If helpful, please Like and Accept the solution

[ErSanjay]

@shoppify-dev have tested it ?

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

[shoppify-dev]

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

[Rashmi4]

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

[stickerlight]

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?

[stickerlight]

boop

[stickerlight]

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

[stickerlight]

https://stickerlight.com/products/stickerlight

[Giants_Fan]

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

[Vanessacotore]

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

[TheFabarsenal]

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?