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.

---

You may have seen a previous video tutorial from us on how to filter our product images so only the selected variants are shown. But many of you have commented that it’s not working on the newer versions of Dawn (v14.0.0 and v15.0.0).

In this tutorial, we’ve included a fix so that it’s compatible with version 14 and 15 of Dawn and the other free Shopify themes.

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

Links: 

• (Prerequisite) How To Show The Selected Variant Images Only (v13 compatible)

 

 

Dawn v14

Follow the instructions from the previous version, except for the global.js edits.

For global.js, place the following method below the renderProductInfo() method

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');
    }
  });
}

Add the following code in renderProductInfo() underneath this.updateMedia(html)

const mediaGallery = document.querySelector(`[id^="MediaGallery-${this.dataset.section}"]`);
if (mediaGallery) {
  this.updateMediaGrouping(mediaGallery);
}

Dawn v15

Follow the instructions from the previous version, except for the global.js edits.

Instead of modifying global.js, we are modifying product-info.js.

Add updateMediaGrouping() to the ProductInfo class

updateMediaGrouping() {
  const mediaGalleries = this.querySelectorAll('media-gallery');
  mediaGalleries.forEach(mediaGallery => {
    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 mediaItems = mediaGallery.querySelectorAll('.product__media-item, .thumbnail-list__item');
    const featuredMedia = Array.from(mediaItems).find(media => !media.classList.contains('hide-image'));
    const featuredVariantGrouping = featuredMedia ? featuredMedia.getAttribute('data-variant-grouping') : null;

    mediaItems.forEach(mediaItem => {
      const mediaVariantGrouping = mediaItem.getAttribute('data-variant-grouping');
      if (mediaVariantGrouping === featuredVariantGrouping) {
        mediaItem.classList.remove('hide-image');
      } else {
        mediaItem.classList.add('hide-image');
      }
    });

    const modalContent = this.productModal?.querySelector('.product-media-modal__content');
    if (modalContent) {
      modalContent.querySelectorAll('.product-modal-image').forEach(mediaItem => {
        const mediaVariantGrouping = mediaItem.getAttribute('data-variant-grouping');
        mediaItem.classList.toggle('hide-image', mediaVariantGrouping !== featuredVariantGrouping);
      });
    }
  });
}

Modify handleUpdateProductInfo method to call updateMediaGrouping

this.updateMediaGrouping();