How can I display product variants as radio buttons in Liquid?

[avocado23]

Hello, I am a beginner in liquid and I am trying to display the variants as radio buttons. And after the customer chooses all the options, different prices will be shown based on the selected variant. I know I can do it easily with dropdowns, but I want to do it using radio buttons. Here's my code so far:

<form>
{% for product_option in product.options_with_values %}
{{ product_option.name }}
{% for value in product_option.values %}
<input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" >
<label for="{{ value }}">{{ value }}</label>
{% endfor %}
<br>
{% endfor %}
<!--need to show the price here-->
<input type="number" min="1">
<button type="submit">Add to Cart</button>
</form>

Any help will be much appreciated. Thank you!

[LitExtension · Accepted solution]

Hi @avocado23,

It will need extra JS code if you want to display different prices. 

Please send me the name of the theme you are using and the site your link.

I will check it

[imlou]

I have the same question, using Debut theme.  Would you be able to assist?

[imlou]

Is there any chance you would be willing to show the javascript that allowed for pricing to push through?  I am trying to solve the same issue and would love a place to start.