carolineschnapp
4/3/2014 - 7:30 PM

Variant Images app and the Simple theme

Variant Images app and the Simple theme

<!-- Only 1 step -->

<!-- Replace this code for the featured image in templates/product.liquid -->

{% if product.featured_image %}
	<img id="feature-image" class="desktop" src="{{ product.featured_image.src | product_img_url: 'master' }}" alt="Product Image" data-zoom-image="{{ product.featured_image.src | product_img_url: 'master' }}" alt="{{ product.featured_image.alt | escape }}" />
	<img class="mobile" src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
	{% if on_sale == true %}<div class="sale">Sale</div>{% endif %}	
{% endif %}

<!-- With that one -->

{% if product.featured_image %}
  <img id="feature-image" src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="Product Image" data-zoom-image="{{ product.featured_image.src | product_img_url: 'master' }}" alt="{{ product.featured_image.alt | escape }}" />
  {% if on_sale == true %}<div class="sale">Sale</div>{% endif %}	
{% endif %}

<!-- So, you...
1. Remove the mobile img tag.
2. Remove the class 'desktop' on img tag that remains.
3. You change size of image used in img tag from master to grande.
-->