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

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

MS7
Tourist
13 1 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

 

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.

Replies 4 (4)

made4Uo
Shopify Partner
3856 717 1201

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

Abdi_Issak
Shopify Partner
44 7 7

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 = "";
        });
    }
  }
Nashville, Tennessee based Shopify Theme Developer.
My contact information:
Email: aissak717@gmail.com
MS7
Tourist
13 1 1

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

 

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

 

MRamzan
Shopify Partner
339 3 35

You can try this method to solve it:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112