Sample code for Stack Overflow question about using radio buttons for Shopify variants (http://stackoverflow.com/questions/19085276/shopify-variants)

README.md

I modified some code from a discussion on the Shopify wiki about using radio buttons for variants (instead of the default drop down list). This is for a Stack Overflow question about custom Shopify variants for shipping options.

Relevant Links:

• Discussion on Shopify wiki about using radio buttons for variants
• Question on Stack Overflow, and my answer

cart.liquid

...

<td>
  <div class="item-title">
    <a href="{{ item.product.url | within: collections.all }}">{{ item.title }}</a>
    {% for p in item.properties %}
      {% unless p.last == blank %}
        <br />
        {{ p.last }}
        <br />
      {% endunless %}
    {% endfor %}
  </div>
</td>

...

product.liquid

<style type="text/css">
  del { font-size:70%; color:#777 }
  ul { list-style:none; text-align:left; padding-left:0 }
  p { text-align:left }
  li label { font-weight:bold }
  li span { padding-left:20px }
</style>

<div class="product-page clearfix">
  <div class="product-images left">   
     <div class="product-featured-image">
       <a href="{{ product.featured_image.src | product_img_url: 'original' }}">
         <img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{product.featured_image.alt | escape }}" />
      </a>
    </div>
    <div class="product-img-list clearfix">
      {% for image in product.images | offset:1 %}
      <div class="product-img left {% cycle '','','last' %}">
        <a href="{{ image.src | product_img_url: 'original' }}">
          <img src="{{ image.src | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
  <div class="product-details left">   
    <h2 class="product-title">{{ product.title }}</h2>
    <div class="product-desc rte">{{ product.description }}</div>
    <div class="price-field">
      {% if product.compare_at_price > product.price %}
        <del>{{ product.compare_at_price | money_with_currency }}</del>
      {% endif %}
      <span>{{ product.price | money_with_currency }}</span>
    </div>

    <form action="/cart/add" method="post" class="product-form">
      <p>Shipping Date: <input type="text" id="datepicker" /></p>

      <script>
        function updateDeliveryDates(dateText, inst) {
          var dateArray = dateText.split("/");
          var selectedDate = new Date(parseInt(dateArray[2]), parseInt(dateArray[1]) - 1, parseInt(dateArray[0]), 0, 0, 0, 0);

          var standardShippingDate = new Date(selectedDate.getTime());
          standardShippingDate.setDate(selectedDate.getDate() + 5);

          var express3DayShippingDate = new Date(selectedDate.getTime());
          express3DayShippingDate.setDate(selectedDate.getDate() + 3);

          var express2DayShippingDate = new Date(selectedDate.getTime());
          express2DayShippingDate.setDate(selectedDate.getDate() + 2);

          jQuery("#delivery-date-10000").html("Earliest: " + jQuery.datepicker.formatDate('dd/mm/yy', standardShippingDate));
          jQuery("#delivery-date-11500").html("Guaranteed by " + jQuery.datepicker.formatDate('dd/mm/yy', express3DayShippingDate));
          jQuery("#delivery-date-12500").html("Guaranteed by " + jQuery.datepicker.formatDate('dd/mm/yy', express2DayShippingDate));

          // Set hidden line item property when delivery date changes
          jQuery("ul li input[type='radio']:checked").click();
        }

        jQuery(function() {
          // Initialize jQuery datepicker
          jQuery("#datepicker").datepicker({
            dateFormat: "dd/mm/yy",
            onSelect: updateDeliveryDates
          });

          // Set initial date in text field to today's date
          jQuery("#datepicker").datepicker('setDate', '+0');

          // Set initial values for delivery date spans
          updateDeliveryDates(jQuery("#datepicker").val(), jQuery("#datepicker"));
        });
      </script>

      {% if product.variants.size > 1 %}
        <script type="text/javascript" charset="utf-8">
          jQuery(function() {
            var first_variant_price = jQuery("ul li input[type='radio']:checked").attr("data-price");
            var first_variant_compare_at_price = jQuery("ul li input[type='radio']:checked").attr("data-compare-at-price") || '';
            jQuery(".price-field span").html(first_variant_price);
            jQuery(".price-field del").html(first_variant_compare_at_price);
            jQuery("input[type='radio']").click(function() {
              var variant_price = jQuery(this).attr("data-price");
              jQuery(".price-field span").html(variant_price);
              var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
              jQuery(".price-field del").html(variant_compare_at_price);

              // Get delivery date from span below variant title & update hidden line item property
              var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
              jQuery("#delivery-date").val(delivery_date);
            });
            // Set initial value for hidden line item property
            jQuery("ul li input[type='radio']:checked").click();
          });
        </script>

        <div id="product-variants">
          <ul>
            {% assign found_available_variant = false %}
            {% for variant in product.variants %}
            <li>{% if variant.available %}
              <input type="radio"{% if variant.compare_at_price > variant.price %} data-compare-at-price="{{ variant.compare_at_price | money_with_currency }}"{% endif %} data-price="{{ variant.price | money_with_currency }}" id="{{ variant.id }}" value="{{ variant.id }}" name="id"{% if found_available_variant == false  %}{% assign found_available_variant = true %} checked="checked"{% endif %} />
              <label for="{{ variant.id }}">{{ variant.title }}</label>
              <br /><span id="delivery-date-{{ variant.price }}"></span><br /><br />
              {% else %}
              <input type="radio" class="out-of-stock" id="{{ variant.id }}" value="{{ variant.id }}" name="id" disabled="disabled" />
              <label for="{{ variant.id }}" class="out-of-stock">{{ variant.title }}</label>{% endif %}
            </li>
            {% endfor %}
          </ul>
        </div>
      {% else %}
        <input type="text" name="id" value="{{ product.variants.first.id }}" />
      {% endif %}

      <input type="hidden" id="delivery-date" name="properties[DeliveryDate]" />
      <input type="submit" name="add" value="Purchase" class="btn" />
    </form>

    {% if collection %}
    <div class="product-nav clearflex">
       {% if collection.previous_product %}
     <div class="left">{{ '&larr; Previous Product' | link_to: collection.previous_product }}</div>
       {% endif %}
       {% if collection.next_product %}
       <div class="right">{{ 'Next Product &rarr;' | link_to: collection.next_product }}</div>
       {% endif %}
     </div>       
     {% endif %}
  </div>
</div>

<script type="text/javascript">
// <![CDATA[
var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('.purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field
  } else {
    // variant doesn't exist
    jQuery('.purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
    var message = variant ? "Sold Out" : "Unavailable";    
    jQuery('.price-field').text(message); // update price-field message
  }
};

// initialize multi selector for product
jQuery(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
  jQuery('.selector-wrapper').addClass('clearfix');
  {% if product.options.size == 1 %}
  jQuery('.selector-wrapper').prepend("<label for='product-select-option-0'>{{ product.options.first }}</label>");
  {% endif %}
});
// ]]>
</script>

theme.liquid

<head>

  ...

  {{ 'http://code.jquery.com/ui/1.10.3/jquery-ui.js' | script_tag }}
  {{ 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' | stylesheet_tag }}
</head>