Blog

Display Images of Selected Variant – No App

1. Update Alt text of images in the gallery for each product.

2. Go to Snippets -> product-media-gallery.liquid

Find ‘product__media-item’ class in li tag which is inside product.media loop.
Paste below code inside the li open tag.

{% if product.selected_or_first_available_variant.featured_media.alt != media.alt and product.selected_or_first_available_variant.featured_media.alt != blank %}
style="display: none;"
{% endif %}
thumbnail-alt='{{ media.alt }}'

3. Go to Assets -> global.js

Find onVariantChange()

Add below line of code just above “if (!this.currentVariant)”

this.filterImgVariant();

Add below function definition after the onVariantChange() function definition:

filterImgVariant() {
  if(this.currentVariant.featured_media && this.currentVariant.featured_media.alt) {
      document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = 'none')
      const currentImgAlt = this.currentVariant.featured_media.alt
      const thumbnailSelector = `[thumbnail-alt = '${currentImgAlt}']`
      document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display = 'block')
  } else {
      document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = 'block')
  }
}