product images don't automatically update when switching between variants

[Reyan]

Hi everyone,

I recently had a developer align the "Quantity" and "Add to Cart" buttons on my product page. Since then, I've encountered an issue where the product images don't automatically update when switching between variants (e.g., from "Black" to another color).

Interestingly, if I hide the "Quantity" and "Add to Cart" sections, the variant image functionality works as expected. However, with those sections visible, the images stop updating properly.

The developer has declined to take responsibility for the issue, so I'm reaching out here for advice. Has anyone else faced a similar problem or know how to fix this?

Thanks in advance for your help!

Best,

Reyan

Store link- https://nmiynt-fx.myshopify.com/

Video reference- https://www.loom.com/share/6f293d2aa9794e4d908ded78041e3804?sid=496c77c0-3019-46c6-904a-d43606f2a734

[rajweb]

Hey @Reyan ,

It sounds like the issue might be related to the way the "Quantity" and "Add to Cart" buttons are being manipulated on your product page. When these elements are visible, they might be interfering with the JavaScript that handles the image switching for variants. Here’s how you can approach solving this:

1. Check JavaScript Conflicts: The first step is to inspect if there are any JavaScript errors or conflicts in the browser console. You can do this by right-clicking on the page, selecting "Inspect" or "Inspect Element," and navigating to the "Console" tab to look for errors.

2. Review Custom Code: Since a developer made changes to the alignment of the buttons, it’s possible that the custom code introduced conflicts with the default variant image switching functionality. You can try:

3. Temporarily disabling the custom code for aligning the buttons to check if it resolves the issue.

4. Reviewing the code that modifies the position or layout of the buttons and ensuring that it doesn’t prevent the image-swapping script from functioning correctly.

5. Revert Button Position Changes: If the issue started after changing the alignment of the "Quantity" and "Add to Cart" buttons, try reverting the buttons to their original positions (or changing their styles without affecting the functionality). This can help identify if the layout changes are causing the issue.

6. Reinitialize Variant Image Functionality: If the image-switching is dependent on a JavaScript function that is triggered when variants are selected, it might need to be re-triggered when the buttons are visible. You can try re-initializing the variant image change functionality after the page elements are modified (i.e., when the buttons are shown or hidden). This might be done with a simple trigger in JavaScript like:

$(document).ready(function() {
  // Reinitialize the variant image functionality
  Shopify.OptionSelectors.prototype.updateImages();
});

Test on a Clean Theme: To isolate the issue, try applying a default Shopify theme (like Dawn) to a duplicate of your store and see if the issue persists. If it works on the default theme, it’s likely that the problem is within your current theme’s customizations.

Let me know if you'd like help with any of these steps!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma