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

How to redirect "Thank You" page to a desired page in Shopify?

According to Shopify docs, the "Thank You page" is the last page your customer visits when he or she orders from your store. In most instances, the Thank You page is page 3 of 3 in the checkout process.  The Thank You page can be customized in three ways:

• Checkout translation
• Create your own css file
• Additional Content & Scripts to add content to your Thank You page

In this tutorial, I'll be teaching you how to redirect "Thank You" page to your desired Thank You page url using simple JavaScript window location.

In your Shopify Dashboard, go to the Settings > Checkout page.  Scroll down and find the Additional Content & Scripts box.  That box is where you add additional instructions or scripts you would  like to show on the Thank You page of the checkout.  In our case, we want that the existing Shopify "Thank You" page will redirect to our desired thank you page.

Here's what to do. 

Paste this script inside the box, and replace the highlighted url with your own url. 
  

<script>
window.location ="http://texasadjusteracademy.com/pages/training-order-received";
</script>

Don't forget to save your changes. 

Read More