title: Jquery - Convert drop down menu to radio buttons
body: <p>I have a Shopify product page currently showing my variants as a drop down menu, like below:</p>
  
  <p><img src="https://i.stack.imgur.com/Sdodb.png" alt="enter image description here"></p>
  
  <p>However, I would like to instead show all available options (in in stock) as a set of options like  below. These options should be clickable/selectable:</p>
  
  <p><img src="https://i.stack.imgur.com/FjZ6h.png" alt=""></p>
  
  <p>Here's the code for the drop down menu, how do I change this to output similar to the screenshot above:</p>
  
  <pre><code>  // &lt;![CDATA[  
  var selectCallback = function(variant, selector) {
  if (variant &amp;&amp; variant.available == true) {
  // selected a valid variant
  jQuery('.button').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
  
  {% if product.compare_at_price &gt; product.price %}
      jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_format}}"));  // update price field
  
      jQuery('.price-field').addClass('sale').attr('sale', 'sale');
  
      jQuery('.compare-field').html(Shopify.formatMoney(variant.compare_at_price, "Was     {{shop.money_format}}"));  // update compare field
  {% else %}
  
      jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_format}}"));  // update price field
  
  {% endif %}
  
  } else {
  // variant doesn't exist
  jQuery('.button').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("&lt;label for='product-select-option-0'&gt;{{ product.options.first }}    &lt;/label&gt;");
  {% endif %}
  });
  // ]]&gt;
  </code></pre>