Convert option varients to radio buttons

3 0 2

Hello everyone!,

First time poster here im a bit stuck on a tricky problem but I am almost there! I want convert our stores existing selector into radio buttons

(This is what I have so far)

Screenshot 2021-09-16 at 16.39.47.png

The probelm is when i submit nothing happens

However i know the radio submission does work as i tested it using this code:

<div class="selector-wrapper">
 <ul> {% for variant in product.variants %}
        <label for="radio_{{ }}" class="radio"><input id="radio_{{ }}" type="radio" name="id" {% if forloop.first %}checked="checked"{% endif %} value="{{ }}">
                        {{ variant.title }} - {{ variant.price | money }}

      {% endfor %}


This is what I have so far:


{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item lf-variant-{{ }}">
<div class="single-option-selector single-option-selector-{{ }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% if != 'Color' %}
<input type='radio' value="" checked="checked">Select {{ }}</option>
{% endif %}
{% for value in option.values %}
<input type='radio' value="{{ value | escape }}">{{ value }}</option>
{% endfor %}
{% endfor %}
{% endunless %}

This is how it supposed to look like 


Screenshot 2021-09-16 at 16.35.28.png


All help appreciated!

Replies 2 (2)
Shopify Partner
24919 2497 9033


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.


If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on regarding any help
Shopify Partner | Skype :
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing