product.html

{% assign buy_with = false %}
{% if product.metafields.buy-with != nil %}
  {% assign buy_with = true %}
  {% assign accessory_handle = product.metafields.buy-with.product_handle %}
  {% for prod in collections.all.products %}
    {% if prod.handle == accessory_handle %}
      {% assign accessory = prod %}
    {% endif %}
  {% endfor %}
  <h4>Goes with {{ accessory.title }}</h4>
{% endif %}

<h1>
  {{ product.title }} 
  {% for variant in product.variants %}
    {% if variant.available %}
    {% else %} 
      <span class="soldout"><em>{{ variant.title }}</em> is currently Sold Out! :(</span> 
    {% endif %} 
  {% endfor %}
</h1>
<!--product-block-->
<div class="product-block">
	<div class="visual-column">

		{% for image in product.images %}
			{% if forloop.first %}
				<a href="{{ image | product_img_url: 'large' }}" class="productimage" rel="lightbox-{{ product.handle }}" title="Pictures of {{product.title | escape }}">
				  <img src="{{ image | product_img_url: 'large'}}" alt="{{product.title | escape }}" />
				</a>
			{% else %}
				{% if forloop.index == 2 %}
				<ul>
				{% endif %}
					<li>
						<a href="{{ image | product_img_url: 'large' }}" class="productimage-small" rel="lightbox-{{ product.handle }}" title="Pictures of {{product.title | escape }}">
						  <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" />
						</a>
					</li>
                {% if forloop.last %}
				</ul>
				{% endif %}
			{% endif %}
		{% endfor %}
	</div>
	<div class="user-column">
		{{ product.description }}
    
<form action="/cart/add" method="post" class="cartableProduct">

  <div id="product-variants">
     
<fieldset>
      <!--<select id="product-select" name='id'>-->
      <select id="product-select-0" name='id[]'>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>
      {% if buy_with == true %}
      <h2>Select a {{ accessory.title }} to go with that:</h2>
      <select id="product-select-1" name='id[]'>
        {% for variant in accessory.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>
      {% endif %}
</fieldset>
 <div id="price-field"></div>
  </div>

    <input type="image" src="{{ 'add_to_shopping_bag.gif' | asset_url }}" name="add" value="Purchase" id="purchase" />
</form>

	</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').html(message); // update price-field message
  }
};

// initialize multi selector for product
jQuery(function() {
  new Shopify.OptionSelectors("product-select-0", { product: {{ product | json }}, onVariantSelected: selectCallback });
  new Shopify.OptionSelectors("product-select-1", { product: {{ accessory | json }}, onVariantSelected: selectCallback });
});
// ]]>
</script>

thanks