Cacher is the code snippet organizer for pro developers

<!--Select vavriants-->

<ul class="select-plan" id="ProductSelect-{{ section.id }}">
  {% for variant in product.variants %}
  <li>
    {% if variant.available %}
      <input type="radio" id="{{ variant.id }}" name="group-{{ product.id }}" {% if forloop.index == 2
        %} {% assign variant_select=variant.title %} checked="checked" {% endif %} value="{{ variant.id }}">

      {% assign additional_text = variant.metafields.sf_options.additional_text %}
      <label for="{{ variant.id }}">
        {{ variant.title }}

        {% if additional_text %}
          <mark>{{ additional_text }}</mark>
        {% endif %}

      </label>

      {% if variant.compare_at_price %}
      <span class="price-box special">
        <span class="old-price">{{ variant.compare_at_price | money }}</span>
        <span class="new-price">{{ variant.price | money }}</span>
      </span>
      {% else %}
      <span class="price-box">
        <span>{{ variant.price | money }}</span>
      </span>
      {% endif %}

      {% else %}
      <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
      {% endif %}
  </li>
  {% endfor %}
</ul>


<!-- Add to cart btn-->
<form method="post" action="/cart/add" class="add-form">
  <input type="hidden" class="buy-btn" name="id" value="{{product.variants.first.id}}" />
  <input type="submit" value="Add to cart" class="btn" />
</form>

\!h ----- theme.js

jQuery(function(){
  initProductSelect();
});

function initProductSelect(){
  var buyBtn = jQuery('.add-form .buy-btn'),
      checkedClass = 'checked';

  jQuery('.select-plan').each(function(){
    var inputs = jQuery(this).find(':radio'),
        activeItem = inputs.filter(':checked');

    activeItem.parent().addClass(checkedClass);
    buyBtn.val(activeItem.attr('id'));

    inputs.on('change', stateHandler);
  });

  function stateHandler(){
    var hold = jQuery(this).parent();

    hold.addClass(checkedClass).siblings().removeClass(checkedClass);
    buyBtn.val(jQuery(this).attr('id'));
  }
}