Product image doesn't switch when selecting different variants

Store Design

Topic summary

A store owner encountered an issue where product images weren’t updating when switching between variants (e.g., selecting a blue headband still displayed the black headband image), despite each variant having an associated image.

Root Cause Identified:
The problem stems from the “Swipper product image carousel” app, which doesn’t natively support variant-based image switching.

Solutions Proposed:

  • Switch to a different app that supports this functionality
  • Implement custom JavaScript code in the theme

Technical Fix:
A detailed code modification was provided involving:

  • Creating a theme backup first
  • Editing assets/global.js
  • Modifying the updateMedia() function to trigger the image slider when variants change

Outcome:
The custom JavaScript solution was successfully implemented and resolved the issue completely.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
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: