Want personalized guidance adding this to your store?

Check out our Insiders community: https://www.skool.com/the-prompted

Members of The Prompted community receive a detailed store audit, 1-on-1 guidance for implementing new features, and access to an exclusive theme. You'll also get marketing support, the same tactics we use to spend over $100k/mo on Meta Ads.

---

In this customization, we’re modifying our product page so that only the variant images are shown.

For example, only the red images are showing when red is selected, black when black is selected, and so on.

This was a pretty fun one, so I hope you guys like it!

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

1. Add variant image grouping filter logic to product-media-gallery.liquid

Add variable assignment near top of the file

{% assign variant_image_groupings = product.metafields.custom.variant_images_grouping_list.value %}
{% assign selected_variant_id = product.selected_or_first_available_variant.id %}

Paste the following code for the featured variant image

{%- assign variant_grouping_name = '' -%}
{%- assign additional_class = 'hide-image' -%}

{% for grouping in variant_image_groupings %}
  {% assign file_group = grouping.file_grouping.value %}
  {% assign variant_group = grouping.variants.value %}

  {% for file in file_group %}
    {% if featured_media == file %}
      {% assign variant_grouping_name = grouping.name.value %}

      {% for variant_in_group in variant_group %}
        {% if variant_in_group.id == selected_variant_id %}
          {% assign additional_class = '' %}
          {% break %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if additional_class == '' %}
      {% break %}
    {% endif %}
  {% endfor %}

  {% if additional_class == '' %}
    {% break %}
  {% endif %}
{% endfor %}

Paste the following code for the remaining variant images

{%- assign variant_grouping_name = '' -%}
{%- assign additional_class = 'hide-image' -%}

{% for grouping in variant_image_groupings %}
  {% assign file_group = grouping.file_grouping.value %}
  {% assign variant_group = grouping.variants.value %}

  {% for file in file_group %}
    {% if media == file %}
      {% assign variant_grouping_name = grouping.name.value %}

      {% for variant_in_group in variant_group %}
        {% if variant_in_group.id == selected_variant_id %}
          {% assign additional_class = '' %}
          {% break %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if additional_class == '' %}
      {% break %}
    {% endif %}
  {% endfor %}

  {% if additional_class == '' %}
    {% break %}
  {% endif %}
{% endfor %}

Add parameters and variables to the <li> elements

{{ additional_class }}

data-variant-grouping="{{ variant_grouping_name }}"

Add css at the end of the file

<style>
.hide-image:not(.is-active) {
  display: none;
} 
</style>

2. Add variant image grouping logic to global.js

Update the VariantSelects class to include a new method updateMediaGrouping()

class VariantSelects extends HTMLElement {
		//.... existing methods....

		onVariantChange() {
				//.... existing methods....
				this.updateMediaGrouping();
				//.... existing methods....
		}
}

Create the method updateMediaGrouping()

updateMediaGrouping() {
  const selectedVariantId = this.currentVariant.id;

  const featuredMedia = document.querySelector('.product__media-item.is-active');
  const featuredVariantGrouping = featuredMedia ? featuredMedia.getAttribute('data-variant-grouping') : null;

  document.querySelectorAll('.product__media-item, .thumbnail-list__item').forEach((mediaItem) => {
    const mediaVariantGrouping = mediaItem.getAttribute('data-variant-grouping');

    if (mediaVariantGrouping !== featuredVariantGrouping || mediaVariantGrouping === '') {
      mediaItem.classList.add('hide-image');
    } else {
      mediaItem.classList.remove('hide-image');
    }
  });
}

3. Assign Product Metafields

Create Metaobject definition: Variant Images Grouping

• name: single line text
  • Regular Expression: ^[a-zA-Z0-9_-]+$ (pattern to match - alphanumeric with - and _)
• variants: list of variants
• File Grouping: list of files

Create Product Metafield Definition

• Name: Variant Images Grouping List
• List of Metaobjects: Variant Images Grouping

Create metaobject entries of type Variant Images Grouping for each variant grouping

• Create identifier
• Select product variants in scope
• Select media files to group together

Add the Variant Images Grouping relevant to your product