Blog

How to Display Images Specific to the Selected Variant Product Page Shopify Prestige Theme | FREE Without App

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

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

Find ‘media in product.media’ loop.
Paste below code inside the 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 -> theme.js

Find onVariantChange_fn = function(event)

Add below lines of code before closing curly brace.

if(event.detail.variant["featured_media"] && event.detail.variant["featured_media"].alt) {
    document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = 'none')
    const currentImgAlt = event.detail.variant["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')
}