Re: Product images not loading

Product images not loading

lunalucenteskin
Explorer
87 0 19

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

 

Image 27-07-2024 at 10.42.jpeg

Replies 10 (10)

K-Mahesh
Shopify Partner
21 3 5

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;
}

Screenshot 2024-07-27 144556.png


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

lunalucenteskin
Explorer
87 0 19

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
Shopify Partner
21 3 5

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.

 

Screenshot 2024-07-27 150544.png

lunalucenteskin
Explorer
87 0 19

And how can we fix that?

 

K-Mahesh
Shopify Partner
21 3 5

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.

Screenshot 2024-07-27 160914.png

lunalucenteskin
Explorer
87 0 19

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

 

K-Mahesh
Shopify Partner
21 3 5

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
Shopify Partner
3765 351 1384

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
        }
    }

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]
lunalucenteskin
Explorer
87 0 19

Hi, 

 

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

 

tim
Shopify Partner
3765 351 1384

The theme code, frankly, looks inconsistent, but,  you should go to your theme assets, open each of the files I mentioned (product-media.jsproduct-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...

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]