How to display images of selected product variant in your Shopify store using variant metafields?

In this video we will give you a demo of how to use product variant metafields to show images of selected product variant. For demo purpose, we are using Dawn theme 12.0.0. This is a SEO friendly way to hide other images of product & show only images of selected product variants. 

Shopify global.js code

 filterVariantImages() {
     if (this.currentVariant.featured_image) {
         var featured_url = this.currentVariant.featured_image.src;
         const segments = featured_url.split('/');
         const fileName = segments[segments.length - 1];
         const fileNameWithoutQueryParameters = fileName.split('?')[0];

         //document.querySelectorAll('[data-img-names]').forEach(img => img.style.display = 'none');

         var imageElements = document.querySelectorAll('[data-img-names]')
         for (const imageElement of imageElements) {
             const imgNames = imageElement.getAttribute('data-img-names');
             if (imgNames.toLowerCase().includes(fileNameWithoutQueryParameters.toLowerCase())) {
                 imageElement.style.display = 'block';
             } else {
                 imageElement.style.display = 'none';
             }
         }
     }
 }
 
 
 Shopify page liquid code 

  
  % if product.selected_or_first_available_variant.metafields.custom.name_of_images != null  %}
            {% assign featuredFilename = product.selected_or_first_available_variant.featured_media | downcase | split: '/' | last %}
          {% assign filename = media | downcase | split: '/' | last %}
          {% assign imageList = "" %}
          {% for variant in product.variants %}
            {% if variant.metafields.custom.name_of_images != null %}
              {% for imageItem in variant.metafields.custom.name_of_images.value %}
                {% assign imageItemName = imageItem | downcase %}
                {% if imageItemName == filename %}    
                  {% for imageItem in variant.metafields.custom.name_of_images.value %}
                      {% assign imageList = imageList | append: imageItem | downcase | append: ", " %}                   
                    {% endfor %}                   
                  {% endif %}                
                {% endfor %}                                    
              {% endif %}
            {% endfor %}   
             

            {%- liquid
              assign media_position = media_position | default: 0 | plus: 1
              assign lazy_load = false
              if media_position > 1
                assign lazy_load = true
              endif
            -%}
            {% render 'product-thumbnail',
              media: media,
              media_count: media_count,
              position: media_position,
              desktop_layout: section.settings.gallery_layout,
              mobile_layout: section.settings.mobile_thumbnails,
              loop: section.settings.enable_video_looping,
              modal_id: section.id,
              xr_button: true,
              media_width: media_width,
              media_fit: section.settings.media_fit,
              constrain_to_viewport: section.settings.constrain_to_viewport,
              lazy_load: lazy_load
            %}
          
          
          {% else %}
          

            {%- liquid
              assign media_position = media_position | default: 0 | plus: 1
              assign lazy_load = false
              if media_position > 1
                assign lazy_load = true
              endif
            -%}
            {% render 'product-thumbnail',
              media: media,
              media_count: media_count,
              position: media_position,
              desktop_layout: section.settings.gallery_layout,
              mobile_layout: section.settings.mobile_thumbnails,
              loop: section.settings.enable_video_looping,
              modal_id: section.id,
              xr_button: true,
              media_width: media_width,
              media_fit: section.settings.media_fit,
              constrain_to_viewport: section.settings.constrain_to_viewport,
              lazy_load: lazy_load
            %}
          
          
          {% endif %}