How do I implement lazy load for images in my store?

Carens
Excursionist
25 0 4

Hi there! I want to lazy load some images into my store But I don't know how. Can somebody here tell me the step by step process to follow please? 

Replies 10 (10)

Developer-G
Shopify Partner
3079 604 857

Hello @Carens ,

 

Here you can find details of it https://www.shopify.com/in/partners/blog/lazy-loading

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

Rishihuptech
Shopify Partner
429 73 76

Hi @Carens 
There are 2 methods for this

1. You can use a jQuery Plugin

2. You can use the browser native method

 

How to implement 1st method

- Download the Lazysizes JS from here: http://afarkas.github.io/lazysizes/lazysizes.min.js

- Add this js to the assets

- Load the js to theme.liquid like this:

<script src="{{ 'lazysizes.min.js'| asset_url }}"></script>

- then where you need the images to be lzayloaded you can follow the below code class must be lazyload

<img class="lazyload" src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ block.settings.image | img_url: '180x'}}"
data-srcset="{{ block.settings.image | img_url: '180x'}} 180w, 
             {{ block.settings.image | img_url: '360x'}} 360w, 
             {{ block.settings.image | img_url: '540x'}} 540w, 
             {{ block.settings.image | img_url: '720x'}} 720w, 
             {{ block.settings.image | img_url: '900x'}} 900w, 
             {{ block.settings.image | img_url: '1080x'}} 1080w, 
             {{ block.settings.image | img_url: '1296x'}} 1296w, 
             {{ block.settings.image | img_url: '1512x'}} 1512w, 
             {{ block.settings.image | img_url: '1728x'}} 1728w, 
             {{ block.settings.image | img_url: '1944x'}} 1944w, 
             {{ block.settings.image | img_url: '2160x'}} 2160w, 
             {{ block.settings.image | img_url: '2376x'}} 2376w, 
             {{ block.settings.image | img_url: '2592x'}} 2592w, 
             {{ block.settings.image | img_url: '2808x'}} 2808w, 
             {{ block.settings.image | img_url: '3024x'}} 3024w"
 >
Change {{ block.settings.image }} to the variable from where the image URL is loaded

That's it for the 1st method

 

For 2nd method, you can simply add the below code but it will not work on some old browsers. You can check the list here: https://caniuse.com/?search=loading%3Dlazy

You need to add the attribute loading="lazy"

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Carens
Excursionist
25 0 4

Hi @Rishihuptech! Where exactly, in the theme.liquid, I should paste the first code? When I download the lazysizes JS Should I create a new file under the folder assets to to add it? Thanks for your reply.

Rishihuptech
Shopify Partner
429 73 76

Hi @Carens 
You can paste the JS before </head> check this screenshot:  https://prnt.sc/6hmyR1Zp975y
And Yes you have to create a new file in the assets, check the screenshot: https://prnt.sc/lvWj5KeMIr0T

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Carens
Excursionist
25 0 4

Thank you so much. What about the second code? Do you have a screenshot of it? So that I can see how to do it? 

Rishihuptech
Shopify Partner
429 73 76

Hi @Carens 
Can you share with me an example where you want to add this code?

For example. Like share the file code and I will update the code and then reshare it with you that way you can have an idea of how to use this code in other files.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Carens
Excursionist
25 0 4

Hello @Rishihuptech. I want to use it for a specific picture on my homepage but I can't find the picture code.

Rishihuptech
Shopify Partner
429 73 76

Hello @Carens Hope you are doing well
Can you share the store URL so I can help you,

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Carens
Excursionist
25 0 4
Rishihuptech
Shopify Partner
429 73 76

Hi @Carens 
Thank you for sharing the store URL can you share the screenshot for which image you want to apply the lazyload?
- The slider or the section with Exclusive finds! 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required