carolineschnapp
2/18/2016 - 8:11 PM

Hide variant images on the product page, so that a variant image is shown as main image only when its corresponding variant is selected.

Hide variant images on the product page, so that a variant image is shown as main image only when its corresponding variant is selected.

style.scss.liquid
content_copyfile_download
.variant-image {
  display: none;
}
product.liquid
content_copyfile_download
<li{% if image.variants.size > 0 %} class="variant-image"{% endif %}>

{% comment %} or {% endcomment %}

<div{% if image.variants.size > 0 %} class="variant-image"{% endif %}>

{% comment %} or {% endcomment %}

<span{% if image.variants.size > 0 %} class="variant-image"{% endif %}>
hide variant images.md
content_copyfile_download
  • Rendered
  • Source

The goal

Hide the thumbnails of variant images on the product page.

How to do that

  1. Add a class of 'variant-image' to the wrapper of each thumbnail that is a variant image. See first product.liquid snippet.
  2. Hide all .variant-image elements with CSS in the theme's stylesheet. See second style.scss.liquid snippet.