Thank you in advance for assisting!
I have managed to lazyload product images, however, I need to lazyload hidden images to improve page SPEED.
( Images that are hidden are the ones in the dropdown menu & images that are not displayed on the first screen of the product, but rather the ones you need to scroll to see.
Looking forward to any input!
Thanks!
Hello @BeautifulDesign ,
Kindly welcome to the Shopify Community.
Lazy Loading needs deep work explained here.
Please let me know if you have any further questions.
Thank you kindly for your reply, but as I am a bit of a “Step by step novice” - that page nor any other pages I have found explain where to edit the class/img src to lazyload ALL images other then the featured ones.
Hello @BeautifulDesign
Please Go to Online Store → Theme → Edit code then go to snippets folder. Did you found responsive-image.liquid and responsive-bg-image.liquid files? yes? So show me their content.
There isn’t such a file in the snippets section 
I think the images that are causing the slower load times are actually Mega Navigation images which I am not sure how to lazyload without messing up the collection page images nor featured product image.
Let me know if you need anything further to help 
And again, thank you so much for your help!
I managed to fix the drawer/meganav lazyloading by editing it in the product.liquid
But, the is one last issue which I am not able to fix after a long time:
Actually, I found the reason to be the lazyloading of product images ( not the thumbnails of the product, but the products themselves ).
I suspect it’s because there is some rule regarding the loading of the featured image.
Do you have any input on how to lazyload product images other than the first one (The main one on the product )?
Let me know if you need info on the website or anything,
best regards!
Hello @BeautifulDesign
You are welcome.
I properly read your problem and need to carefully analyze your website to provide a solution here.
Would you kindly share your website URL and if your website is password protected then also provide a password?
Please let me know if you have any further questions.
Thank you so much for your help, here you go!
Looking forward to your answer!
Hope you’re having a great day!
We have two ways to do lazy loading: There is a Shopify application that you could use or edit the code of your website. If you are ready, I can help you step by step to fix your issue.
If you have any further questions, please do reach out either here on the forum, or via private message/email.
In case you want to edit the code of your website to enable lazy loading :
Download lazy loading lib
Download this script file.
Create a new asset: lazysizes.min.js and Copy and paste the downloaded script file content into the created file.
Integrate the script into theme.liquid, before the closing tag, by adding the following code:
become:
​
If you have any further questions, please do reach out either here on the forum, or via private message/email.
Thanks.
It was needed to be done through -npm Install with the help of a developer for anyone that was interested in the subject.
You are welcome. I’m glad you were satisfied.
If you have any further questions, please do reach out either here on the forum, or via private message/email.