Monday, January 27, 2014

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!


Share This!


1 comment:

  1. Do you tend to open your own Shopify store with a small fund? Are you deep in thought of competing with other rivals? How to make people come over your store?

    iShopify.net helps you to create online stores with Shopify themes and Shopify templates

    ReplyDelete

Powered By Blogger · Designed By Seo Blogger Templates