Solved

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

avocado23
Shopify Partner
15 0 3

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!
 
Accepted Solution (1)

LitExtension
Shopify Partner
4860 1002 1141

This is an 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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 3 (3)

LitExtension
Shopify Partner
4860 1002 1141

This is an 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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
imlou
Visitor
3 0 0

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

imlou
Visitor
3 0 0

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.