Select the radio buttons of the first available variant by default

Technical Q&A
1

I am developing a theme from scratch and I am facing a problem where I am rendering the product options as radio button groups. When the user selects or changes the radio button, I am updating the price accordingly. My problem is, I don’t know how to select the first available variant as the selected radio button values. The way I am doing it, it’s making the last available variant as the default selected radio buttons when the page loads.

Any help will be much appreciated. Here is my code:


{{ price | money }}
          
                

                    {% for product_option in product.options_with_values %} 
                        #### {{ product_option.name }}
                        
                            {% for value in product_option.values %}
                                
                                  
                            {% endfor %}
                        

                       

                  {% endfor %}
2

Hi @avocado23 ,

Please set checked display condition here:

Screenshot.png
Screenshot.png937×541 41.4 KB

Code:

{% if product_option.selected_value == value %}checked{% endif %}

Code full:


{{ price | money }}

  {% for product_option in product.options_with_values %} 
    #### {{ product_option.name }}
    
      {% for value in product_option.values %}
      
        
      {% endfor %}
    

    

  {% endfor %}

Hope it helps!

3

thank you so much for your reply! it works. however, i don’t really understand the if condition. would you mind explaining how this if condition is working here?