Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active June 21, 2021 20:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save carolineschnapp/9961168 to your computer and use it in GitHub Desktop.
Save carolineschnapp/9961168 to your computer and use it in GitHub Desktop.
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.
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment