How to Display Images Specific to the Selected Variant Product Page Shopify Prestige Theme | FREE Without App Post author:administrator Post published:January 13, 2024 Post category:Shopify 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') } You Might Also Like How to change Add to cart to Great choice button label on Click? June 19, 2024 How To Add Custom Shopify Thank You Page? August 23, 2023 How to Fix Mobile View blank White Page Shopify Store | [SOLVED] 2024 July 8, 2024