Shopify Question posted in
The Shopify help center can be found here.

Shopify product variants option display in radio button

I want to show the product variant options as radio buttons like here enter link description here

But my current theme shows the options as dropdowns. Iwant to list it as above. Can anyone please help me know how to render it like that of above link. Need to know only the template code . I will work on the CSS part on my own.

{% if product.options.size > 1 %}

// how to display the product options with label(like color) and its options(Red,Yellow)

{% endif %}

Tags:

3

Answers


  1. 0

    You could do something like this. Noting that the for= in the label should match the id in the input.

     {% unless product.has_only_default_variant %}
  {% for option in product.options_with_values %}
    <div>  
      {% for value in option.values %}
        <input 
        type="radio" 
        name="{{option.name}}" 
        value="{{ value | escape }}"
        id="{{option.name | handleize}}-{{value | escape | handleize}}">
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>
      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}
    Login or Signup to reply.
  2. 0 
    {% comment %}
Filename : product-template.liquid
code for displaying variants as radio buttons instead of select option
Note : Please don't remove existing selectbox, Hide with display options
<div class="selector-wrapper js product-form__item" style="display:none;">
{% endcomment %}

{% unless product.has_only_default_variant %}

  {% for option in product.options_with_values %}
        {% assign my_option =  forloop.index0  %}
    <div>  
      {% for value in option.values %}
        <input  
        type="radio" 
        name="{{option.name}}" 
        onclick="return bala(this.name,this.value, this.id);"
               value="{{ value | escape }}"
        id="SingleOptionSelector-{{ my_option }}"
                              >
        <label for="{{option.name | handleize}}-{{value | escape | handleize}}" class="{{option.name | downcase}}">
          {{value}}
        </label>

      {% endfor %}
    </div>
  {% endfor %}
{% endunless %}    


<!--  Javascript For changing selectbox value with radio button selection -->
 <script>    
    function bala(name, value, id)
    {
      $('#'+id).val(value).trigger('change')
    }  
  </script>
    Login or Signup to reply.
  3. 0 
    <div class="product-variants infiniteoptions">
  <ul>{% for variant in product.variants %}
	  <li class="{% cycle 'odds': 'odd', 'even' %}">
		  {% if variant.available %}<input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" {% if forloop.first %}checked="checked"{% endif %} />
			  <label for="radio_{{ variant.id }}" class="radio">
				  <strong>{{ variant.title | escape }}</strong> for <span class="bold-blue">{{ variant.price | money }}</span>
				  {% if variant.price < variant.compare_at_price %}<del>{{ variant.compare_at_price | money }}</del>{% endif %}
			  </label>
		  {% else %}
			  <input type="radio" name="id" value="{{ variant.id }}" id="radio_{{ variant.id }}" disabled="disabled" />
			  <label for="radio_{{ variant.id }}" class="radio">
				  <strong>{{ variant.title }}</strong> is temporarily unavailable
			  </label>
		  {% endif %}
	  </li>
  {% endfor %}</ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search