Product image doesn't switch when selecting different variants

Store Design
1

Hi! I have multiple variants for many of my products. When I’m on a product page and I try switch between the different variants, the image will not change.

For example, I want to select a blue headband variant, but the image shown is still the black headband.

Does anyone know of a fix for this? I have made sure each variant has an associated image when setting up the products.

Here is a link to a product page for my store: https://nuvocollection.com/products/head_band_noir?variant=48687311814986

Kind regards

Theo from Nuvo

2

Hello @Theo_Bee I have checked your details.
To change the image when we switch between different varients need some custom coding.
let me know if you need help with the coding.
Thanks

3

Looks like the app you’re using to implement image slider, “Swipper product image carousel” does not do this.

You may consider using another app.

Also, it’s possible to add some JS code to your theme to implement this, but there is no guarantee the app will not change the way it works.

Anyway:

You’d need to make a duplicate copy of your theme first.

Then edit your theme code and open assets/global.js

Find function updateMedia:

updateMedia() {
    if (!this.currentVariant || !this.currentVariant.featured_media)
      return;
 . . .

and modify it like this:

updateMedia() {
  if (!this.currentVariant || !this.currentVariant.featured_media)
    return;
  const slides = document.querySelectorAll(`.s-media-${this.currentVariant.featured_media.id}`);
  slides.forEach( s => {
    const index = [...s.parentElement.children].indexOf(s);
    const slider = s.closest('.swiper');
    if (index >=0 && slider?.swiper) {
      slider.swiper.slideTo(index)
    }
  });
. . .
1 Like
4

Thank you so much Tim - you’re an angel! Your solution worked perfectly :slightly_smiling_face: