<h3>We have wonderful products!</h3>
<ul id="products">
<div id="productpage">
<div id="productimages"><div id="productimages-top"><div id="productimages-bottom">
{% for image in product.images %}
{% if forloop.first %}
<a href="{{ image | product_img_url: 'large' }}" class="productimage" rel="lightbox">
<img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title | escape }}" />
</a>
{% else %}
<a href="{{ image | product_img_url: 'large' }}" class="productimage-small" rel="lightbox">
<img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" />
</a>
{% endif %}
{% endfor %}
</div></div></div>
<h2>{{ product.title }}</h2>
<ul id="details" class="hlist">
<li>Vendor: {{ product.vendor | link_to_vendor }}</li>
<li>Type: {{ product.type | link_to_type }}</li>
</ul>
<small>{{ product.price_min | money }}{% if product.price_varies %} - {{ product.price_max | money }}{% endif %}</small>
<div id="variant-add">
<form action="/cart/add" method="post">
<select id="variant-select" name="id" class="product-info-options">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
<div id="price-field" class="price"></div>
<div style="text-align:center;"><input type="image" name="add" value="Add to Cart" id="add" src="{{ 'addtocart.gif' | asset_url }}" /></div>
</form>
</div>
<div class="description textile">
{{ product.description }}
</div>
</div>
<script type="text/javascript">
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
$('add').removeClassName('disabled'); $('add').disabled = false; $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"); } else {
$('add').addClassName('disabled'); $('add').disabled = true; $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; }
};
Event.observe(document, 'dom:loaded', function() {
new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
</script>
</ul>