Blog

How can I display selected variant images on Shopify? All FREE Themes

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

2. Go to Snippets -> product-media-gallery.liquid paste below code in first li of ul and add class desktopview-showit in li and also paste this code in the first class of ‘thumbnail-list__item slider__slide’

thumbnail-alt='{{ featured_media.alt }}'
thumbnail-alt-main='{{ featured_media.alt }}'

Then in the first loop of {%- for media in product.media -%}

Paste below code in the li opening tag also add this class desktopview-showit in the li 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 }}'
thumbnail-alt-main='{{ media.alt }}'

Paste below code in second loop of {%- for media in product.media -%}

{% 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}']`
        const thumbnailSelectorMain = `[thumbnail-alt-main='${currentImgAlt}']`
        console.log("....", thumbnailSelectorMain)
        document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display = 'block')
    } else {
        document.querySelectorAll('[thumbnail-alt]').forEach(img => img.style.display = 'block')
    }
}

4. Go to media-gallery.js find

add('is-active')

5. Add this code below it:

if (matchMedia('only screen and (min-width: 800px)').matches) {
    if(document.querySelectorAll(".desktopview-showit")) {
        document.querySelectorAll(".desktopview-showit").forEach(img => img.style.display = 'none')
        if(document.querySelector(".desktopview-showit.is-active")) {
            document.querySelector(".desktopview-showit.is-active").style.display = 'block'
        }
    }
}