Radio buttons for product variations in Shopify

1. Go to Shopify Dashboard >> Themes >> Template Editor.
2. Under Templates Folder at the left side, click product.liquid.
3. Click Control F and look for product-variants id. Right below it, you can see these codes for
pull down menu. I just comment it out so anytime I want to revert to pull down menu, I have these codes right away.
         <!--
               <select id="product-select" name="id" class="hidden">
               {% for variant in product.variants %}
                 <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
               {% endfor %}
               </select> -->

4. After commenting out, place these codes for radio buttons.

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

5. This is how it looks.

 6. To give more emphasis on the offered products,  I add styles by alternating bold texts and regular. Just add these codes, above the div. It goes this way.

 <style>
.selector-wrapper ul li label{ font-weight:bold; }
.selector-wrapper ul li:nth-child(odd) label{font-weight:normal; }
</style>

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

7. That's all folks. It should work like a charm!

Read More