Hover Image Not Updating with Variant Selection

[Punlord_LLC]

Hi Shopify Community,

I’m having trouble with the hover image on my product pages. While the primary image correctly updates when selecting a different variant (e.g., color), the hover image remains static and doesn’t change to reflect the selected variant.

Goal:

I want the hover image to update dynamically, just like the primary image, when a new variant is selected. For example, if the customer selects a red shirt, the hover image should show the corresponding side view for the red variant. This allows the customer to select a color swatch, and see alternate angles while shopping.

Current Issue:

• Primary image updates correctly with variant selection.
• Hover image stays the same and doesn't reflect the selected variant.

Help Needed:

How can I ensure the hover image updates based on the selected variant, along with the primary image? Any advice or examples would be much appreciated!

Thanks in advance!

[Punlord_LLC]

Hi Max,

Thank you so much for pointing me in the right direction! I’ve directly messaged the theme support team and am currently waiting to hear back from them regarding the hover image issue. If they don’t have a solution, I’ll definitely follow up with you. If they do, I’ll make sure to post it for others to see.

Thanks again for your help!

Best regards,
Marc

[Punlord_LLC]

Hi everyone,

I wanted to follow up with an update after taking a closer look at the issue. Thanks to Max’s suggestion, I was able to dive into the JavaScript handling variant selection and found a solution.

By extending the logic that updates the primary image, I made sure the hover image dynamically updates as well. The key for me was ensuring that both the src and srcset attributes for the hover image were updated when a new variant is selected. This ensures that the hover image reflects the correct variant and displays properly across different screen sizes.

Additionally, I had to make sure that the hover image resets to its default state when a variant is deselected. This was a small but important step to ensure a smooth and consistent user experience.

I’m not able to share all the specifics, but I wanted to confirm that modifying the JavaScript to handle the hover image alongside the primary image was the right approach. If anyone else runs into this, Max's suggestion is definitely a good starting point!

Thanks again for the help, Max, and I hope this update helps others!

Best,
Marc
Punlord LLC