Issue with variant product images not displaying when selected

Hello support,

Product variant images seem to only work on the 'Shop' page.

Whenever I insert a product block on any other page, the following happens:

The featured image always displays, but...

...whenever you select a different image, the inventory image simply disappears completely.

It does this for every product that we are selling.

We have triple checked that all the variant options are correct and linked to images.

And, as said, they work perfectly fine on the shop page.

Have pictures attached showing step by step what happens.

Thank you,

Dominic

On 5/20/2023 at 9:41 PM, DomBrady said:

Product variant images seem to only work on the 'Shop' page. Whenever I insert a product block on any other page, [the second and subsequent images disappear]

@DomBrady This is a bug. According to Squarespace Customer Care, Engineering teams are currently prioritizing a fix for this [21 May 2023].

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks. It is been there a long time.

If you hear anything, I would love to hear it.

Surprised noone else seems to have mentioned it.

I am seeing the same thing. Any update?

I've raised the issue as well, and just now, after almost a year, there's still no fix. Is there any code I can add to fix this, in my mind, major issue with Squarespace?

Selecting the colour and the pair or single option should show the desired image, as it does in the main store, but it just removes the standard image and shows none. This is essential for my customers to be able to choose a product. Does anyone have any suggestions; code or workarounds?

https://www.pockethearing.com/signia-silk-x

I ran into this issue and in my case it looks like the other variant images lack the src attribute for some reason. I was able to hack a workaround for this. If you add this to your header code you should be able to see the other images:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Find all variant images
    var imgTags = document.querySelectorAll('img.sqs-product-block-variant-image');

    imgTags.forEach(function(img) {
        // Check if the img tag has a src attribute
        if (!img.hasAttribute('src')) {
            // If it doesn't have a src attribute, add one from the data-src attribute
            var dataSrc = img.getAttribute('data-src');
            if (dataSrc) {
                img.setAttribute('src', dataSrc);
            }
        }
    });
});
  
</script>