Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to fix lazy loading issue with product images on my website?

Solved

How to fix lazy loading issue with product images on my website?

DAGNORAK
Excursionist
69 0 6

Hello all, I’ve had an issue when uploading my images to my website with lazy loading 

the images show alt text before appearing. 
on my home page I’ve fixed this already by removing the lazy loading code in the Multicolumn theme code etc. so they appear fine now but it’s just these product images I can’t seem to find the code where the lazy loading is. I’ll tag a photo of what happens. This only happens for 1-2 seconds once you load the product then it loads successfully but I need the photos to appear instantly. The photos are only around 100Kb anyway so there’s no load on the site. And the site is only small anyway. Any help is appreciated. DAGNORAK.com 

1C2DD81E-0AE1-4D64-BAF2-C2F5FF4D48AD.png

Accepted Solution (1)

made4Uo
Shopify Partner
3856 717 1198

This is an accepted solution.

Hi @DAGNORAK 

 

You can change the lazy loading of the product page by following on the instructions below.

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and open the product-media-gallery.liquid file

3. Change the lazy_load for both main and thumbnail images, see image below

 

made4Uo_0-1685470919718.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 4 (4)

NomtechSolution
Astronaut
1245 113 154
  1. Locate the code responsible for lazy loading in your theme. This code could be present in a JavaScript file or within a script tag in your theme's code.
  2. Look for the section of code that targets image elements for lazy loading. It might use a function like lazyLoad() or similar.
  3. Identify the part of the code that applies lazy loading specifically to product images. This could involve selecting elements with a specific class, attribute and remove it
DAGNORAK
Excursionist
69 0 6

I’ve tried this I just can’t locate it 

made4Uo
Shopify Partner
3856 717 1198

This is an accepted solution.

Hi @DAGNORAK 

 

You can change the lazy loading of the product page by following on the instructions below.

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and open the product-media-gallery.liquid file

3. Change the lazy_load for both main and thumbnail images, see image below

 

made4Uo_0-1685470919718.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
nathanhuffhines
Excursionist
19 1 5

I'm in the Expanse theme and I feel like I'm in the right place, I just can't figure out how to remove the lazy loaded functionality. I tried replacing img class with "image" and it just breaks stuff.

 

nathanhuffhines_0-1725574138404.png