Multiple Variant Images for Dawn-Theme doesn’t work as I wish

Store Design
1

Hello,

We have chosen the Dawn-Theme and we would like to have Multiple Variant Images.

Therefore I followed the steps on this website: https://websensepro.com/blog/how-to-show-only-selected-variant-images-shopify-dawn-theme/

So it works, but there is one problem left. The Variant-Images just get dispayed if I click on the button to change the size. But it doesn’t works if i just refresh the product-page, because then unfortunately all images get displayed, but I just want to show there also just the filtered variant images.

I think that I have something to change in the global.js

Because there I added the Code “this.filterMedia();” as on the website “websensepro.com” shown to the function “onVariantChange()”.

MS7_0-1655485100994.png
MS7_0-1655485100994.png409×353 8.88 KB

So I think the Code “this.filterMedia();” should be added to any other area, where it get triggered on webpageRefresh. But because I’m not a developer I’m not sure, if this is the solution.

I hope anyone could help me. I’ve really tried everything.

Thanks for all your help in advance.

2

Hi @MS7 ,

I also created a code for this but yes at first load, it will show all the product images, since the function only triggers when there is a change of the variant options. You have to provide an initial function for this

3

This is the code I used if it helps.

filterMedia() {
    // scroll thumbnail slider to the beggining
    document.querySelector("#m-slider").scrollTo(0, 0);

    if (
      this.currentVariant.featured_image != null &&
      this.currentVariant.featured_media.alt != null
    ) {
      // hide all thumbnails
      document
        .querySelectorAll("[data-thumbnail-color]")
        .forEach(function (element) {
          element.style.display = "none";
        });
      //show thumbnails for selected variant
      var selected_variant = this.currentVariant.featured_media.alt;

      document
        .querySelectorAll(`[data-thumbnail-color*="${selected_variant}"]`)
        .forEach(function (element) {
          element.style.display = "";
        });

      document
        .querySelectorAll('[data-thumbnail-color="all"]')
        .forEach(function (element) {
          element.style.display = "";
        });
    } else {
      // show all thumbnails
      document
        .querySelectorAll("[data-thumbnail-color]")
        .forEach(function (element) {
          element.style.display = "";
        });
    }
  }
4

Many thanks for the code, but unfortunately it doesn’t work. As I mentioned before I used this code: https://websensepro.com/blog/how-to-show-only-selected-variant-images-shopify-dawn-theme/

So I replaced just the old function filterMedia() in the global.js file (which I had from the website “websensepro.com”) with your new function filterMedia()

MS7_0-1655877657595.png
MS7_0-1655877657595.png652×803 38.1 KB

Are there any other steps which I can do? Or should I delete all of the original code and just copy&paste your code on the right position?

I hope you can help me.

Thank you in advance

5

You can try this method to solve it: