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.
---
If you have multiple images along with multiple variants, your product media may be confusing to your customers. With this customization, we filter out images so that only the selected variant images are shown.
Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight). Not compatible with v14.0.0 and above
Links:
Create Metafields
Create Product Metafield to handle product exceptions
NOTE: This step was accidentally omitted from the video, but is an important feature if you have products that you want the default behavior to run, ie. showing all product images with no image grouping filtering. If this is what you want, then set this metafield for those products to TRUE.
- Create the following product metafield:
- Name: Disable Image Grouping
- Type: True or false
When a product has this metafield set to TRUE, then the code will not run on these products, resulting in the default (non-customized) behavior.
Edit Theme Code
Add settings to the Theme Editor
Add schema settings to main-product.liquid
{
"type": "header",
"content": "Selected Variant Image Grouping"
},
{
"type": "checkbox",
"id": "group_variants_enable",
"default": false,
"label": "Only Show Selected Variant Images"
},
{
"type": "select",
"id": "group_variants_source",
"options": [
{
"value": "metafield",
"label": "Metafield"
},
{
"value": "filename",
"label": "Filename"
},
{
"value": "alttext",
"label": "Alt Text"
}
],
"default": "metafield",
"label": "Source reference for grouping variant images "
},
{
"type": "text",
"id": "variant_grouping_delimiter",
"label": "Variant Split Delimiter",
"default": "__",
"info": "Character or group of characters used to separate file name or alt text to extract the variant grouping reference name."
},
{
"type": "range",
"id": "variant_grouping_position",
"label": "Variant Name Position",
"default": 1,
"min": 1,
"max": 5,
"info": "Position of the variant grouping reference name after filename or alt text has been separated by the delimiter. Must be consistent across all filenames or alt text."
},
Add variant image grouping filter logic to product-media-gallery.liquid
Add variable assignment and css near top of the file
{% assign variant_grouping_position = section.settings.variant_grouping_position | minus: 1 %}
{% assign variant_image_groupings = product.metafields.custom.variant_images_grouping_list.value %}
<style>
.hide-image:not(.is-active) {
display: none;
}
.product-media-modal__content .hide-image:not(.is-active) {
display: none;
}
</style>
Add the following data attributes to the <media-gallery> tag (NOTE: this step was accidentally omitted from the video)
data-group-variants="{{ section.settings.group_variants_enable }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-disable-image-grouping="{{ product.metafields.custom.disable_image_grouping.value }}"
For example, after adding the attributes, it can look like this:
<media-gallery
id="MediaGallery-{{ section.id }}{{ id_append }}"
role="region"
{% if section.settings.enable_sticky_info %}
class="product__column-sticky"
{% endif %}
aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
data-desktop-layout="{{ section.settings.gallery_layout }}"
data-group-variants="{{ section.settings.group_variants_enable }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-disable-image-grouping="{{ product.metafields.custom.disable_image_grouping.value }}"
>
Note: the code below for product-media-gallery.liquid will be added twice - once for stacked/2 columns and once for thumbnails/thumbnail carousel
Paste the following code for the featured variant image
{% if section.settings.group_variants_enable and product.has_only_default_variant != true and product.metafields.custom.disable_image_grouping.value != true %}
{% if section.settings.group_variants_source == "metafield" %}
{%- assign variant_grouping_name = nil -%}
{% 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 %}
{% break %}
{% endif %}
{% endfor %}
{% if variant_grouping_name != nil %}
{% break %}
{% endif %}
{% endfor %}
{% else %}
{%- assign variant_grouping_name = nil -%}
{% if section.settings.group_variants_source == "filename" %}
{%- assign extracted_parts = featured_media.src | split: section.settings.variant_grouping_delimiter -%}
{% elsif section.settings.group_variants_source == "alttext" %}
{%- assign extracted_parts = featured_media.alt | split: section.settings.variant_grouping_delimiter -%}
{% endif %}
{%- assign variant_grouping_name = extracted_parts[variant_grouping_position] -%}
{%- assign selected_or_first_available_variant_grouping_name = variant_grouping_name -%}
{% endif %}
{% endif %}
Paste the following code for the remaining variant images
{% if section.settings.group_variants_enable and product.has_only_default_variant != true and product.metafields.custom.disable_image_grouping.value != true %}
{% if section.settings.group_variants_source == "metafield" %}
{%- assign variant_grouping_name = nil -%}
{% assign hide_image = true %}
{% 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 == product.selected_or_first_available_variant.id %}
{% assign hide_image = false %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if hide_image == false %}
{% break %}
{% endif %}
{% endfor %}
{% if hide_image == false %}
{% break %}
{% endif %}
{% endfor %}
{% else %}
{%- assign variant_grouping_name = nil -%}
{% if section.settings.group_variants_source == "filename" %}
{%- assign extracted_parts = media.src | split: section.settings.variant_grouping_delimiter -%}
{% elsif section.settings.group_variants_source == "alttext" %}
{%- assign extracted_parts = media.alt | split: section.settings.variant_grouping_delimiter -%}
{% endif %}
{%- assign hide_image = true -%}
{%- assign variant_grouping_name = extracted_parts[variant_grouping_position] -%}
{% if selected_or_first_available_variant_grouping_name == variant_grouping_name %}
{%- assign hide_image = false -%}
{%- endif -%}
{% endif %}
{% endif %}
Add additional class and attributes to the <li> elements
Add class hide_image (only for looped <li> element)
{% if hide_image %} hide-image{% endif %}
Add data-variant-grouping attribute to the <li> elements
data-variant-grouping="{{ variant_grouping_name }}"
Add variant image grouping filter logic to product-media-modal.liquid
Add variable assignment near top of the file
{% assign variant_grouping_position = section.settings.variant_grouping_position | minus: 1 %}
{% assign variant_image_groupings = product.metafields.custom.variant_images_grouping_list.value %}
{% assign featured_media = product.selected_or_first_available_variant.featured_media %}
{% assign hide_image = false %}
Paste the following code for the featured variant image
{% if section.settings.group_variants_enable and product.has_only_default_variant != true and product.metafields.custom.disable_image_grouping.value != true %}
{% if section.settings.group_variants_source == "metafield" %}
{%- assign variant_grouping_name = nil -%}
{% 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 %}
{% break %}
{% endif %}
{% endfor %}
{% if variant_grouping_name != nil %}
{% break %}
{% endif %}
{% endfor %}
{% else %}
{%- assign variant_grouping_name = nil -%}
{% if section.settings.group_variants_source == "filename" %}
{%- assign extracted_parts = featured_media.src | split: section.settings.variant_grouping_delimiter -%}
{% elsif section.settings.group_variants_source == "alttext" %}
{%- assign extracted_parts = featured_media.alt | split: section.settings.variant_grouping_delimiter -%}
{% endif %}
{%- assign variant_grouping_name = extracted_parts[variant_grouping_position] -%}
{%- assign selected_or_first_available_variant_grouping_name = variant_grouping_name -%}
{% endif %}
{% endif %}
Paste the following code for the remaining variant images
{% if section.settings.group_variants_enable and product.has_only_default_variant != true and product.metafields.custom.disable_image_grouping.value != true %}
{% if section.settings.group_variants_source == "metafield" %}
{%- assign variant_grouping_name = nil -%}
{% assign hide_image = true %}
{% 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 == product.selected_or_first_available_variant.id %}
{% assign hide_image = false %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% if hide_image == false %}
{% break %}
{% endif %}
{% endfor %}
{% if hide_image == false %}
{% break %}
{% endif %}
{% endfor %}
{% else %}
{%- assign variant_grouping_name = nil -%}
{% if section.settings.group_variants_source == "filename" %}
{%- assign extracted_parts = media.src | split: section.settings.variant_grouping_delimiter -%}
{% elsif section.settings.group_variants_source == "alttext" %}
{%- assign extracted_parts = media.alt | split: section.settings.variant_grouping_delimiter -%}
{% endif %}
{%- assign hide_image = true -%}
{%- assign variant_grouping_name = extracted_parts[variant_grouping_position] -%}
{% if selected_or_first_available_variant_grouping_name == variant_grouping_name %}
{%- assign hide_image = false -%}
{%- endif -%}
{% endif %}
{% endif %}
Add parameters hide_image and variant_grouping_name to the product-media.liquid render
render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image, hide_image: hide_image, variant_grouping_name: variant_grouping_name
Add classes and attributes to product-media.liquid
Add classes to the <img> element
product-modal-image{% if hide_image %} hide-image{% endif %}
Add data-variant-grouping attribute to the <img> element
data-variant-grouping="{{ variant_grouping_name }}"
Add variant image grouping logic to global.js
Create new method updateMediaGrouping()
updateMediaGrouping(mediaGallery) {
if (!mediaGallery) {
return;
}
const mediaGalleryId = mediaGallery.id;
const groupVariants = mediaGallery.getAttribute('data-group-variants');
const hasOnlyDefaultVariant = mediaGallery.getAttribute('data-has-only-default-variant');
const disableImageGrouping = mediaGallery.getAttribute('data-disable-image-grouping');
if (groupVariants == 'false' || hasOnlyDefaultVariant === 'true' || disableImageGrouping === 'true') {
return;
}
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(`#${mediaGalleryId} .product__media-item, #${mediaGalleryId} .thumbnail-list__item, .product-media-modal__content .product-modal-image`).forEach((mediaItem) => {
const mediaVariantGrouping = mediaItem.getAttribute('data-variant-grouping');
if (mediaVariantGrouping !== featuredVariantGrouping || mediaVariantGrouping === '') {
mediaItem.classList.add('hide-image');
} else {
mediaItem.classList.remove('hide-image');
}
});
}
Update the updateMedia method to call updateMediaGrouping()
(added curly brackets and line this.updateMediaGrouping(mediaGallery);
mediaGalleries.forEach((mediaGallery) => {
mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true)
this.updateMediaGrouping(mediaGallery);
}
Assign Product Metafields (if using Metafield option)
- 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
- name: single line text
- 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