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 Create FAQs Page for Shopify Theme Dawn | Creating Accordions in Shopify Theme Development October 6, 2021 How to add Sticky Add to Cart button on Shopify DAWN Theme V15 Without App July 14, 2024 Shopify PayPal Credit Debit Card Buttons | Debutify Theme | Smart Buttons Updated Code June 7, 2021
How To Create FAQs Page for Shopify Theme Dawn | Creating Accordions in Shopify Theme Development October 6, 2021