Product images not loading

[lunalucenteskin]

Hi everyone, for some weird reason our product images dont show, its only on a few ones and on desktop.

On mobile they all work but some in desktop don't.

URL is www.lunalucente.com

[K-Mahesh]

Hello @
You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your product.css file
3. Paste the below code from bottom on product.css

.m-product-media--slider .swiper-container, 
.m-product-media--slider .nav-swiper-container {
    opacity: 1;
}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[lunalucenteskin]

No thats not the issue, some product images aren't showing, but the ones that are showing are good, so no need to change the appearance of the slider.

[K-Mahesh]

Slider doesn't work in it.
Shows errors in console, needs to be fixed. It is possible that the slider is not working due to errors.

[lunalucenteskin]

And how can we fix that?

[K-Mahesh]

The productData script tag should be moved inside an element with the m-main-product--wrapper class so that the error is not displayed in the console.

[lunalucenteskin]

Hi, thanks for the tip! In which file can we find these lines?

[K-Mahesh]

The theme code, frankly, looks inconsistent, but, you should go to your theme section and snippets, open each of the files I mentioned (product-media.liquid, media.liquid, main-product.liquid), search for productData id, and move inside an element with the m-main-product--wrapper class.

[tim]

There are Javascript errors in your theme. 

In particular, function getProductJson in the following files: product-media.js, product-media-mobile.js and variant-picker.js.

You should contact the theme developer as their demo site has these errors fixed.

Quick fix -- the function should look like this:

getProductJson() {
        const e = document.querySelector("#productData[type='application/json']");
        try {
          if (!e) throw new Error("Product data element not found in the container.");
          return JSON.parse(e.textContent)
        } catch (e) {
            return null
        }
    }

[lunalucenteskin]

Hi, 

Thanks for the clear tips, where can we implement the quick fix?

[tim]

The theme code, frankly, looks inconsistent, but,  you should go to your theme assets, open each of the files I mentioned (product-media.js, product-media-mobile.js andvariant-picker.js, maybe product-card-swatch.js if you use swatches), search for function getProductJson, and replace it with the code I've provided.

It's possible that the file is minified (looks like one long line of code), then it would be a bit more complex, I'd recommend enlisting someone to help you, preferably theme developers...