How to Easily Add Lazy Loading for Images in Shopify
Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. So Lazy loading images helps with website performance.
This article will let you know how you can add lazy loading for images in Shopify.
Step 1: Add the Lazy Load script to the Shopify store
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Layouts directory, click
themes.liquidto open it in the online code editor. - In the online code editor, add the below code before close </head> tag.1{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
- Click Save.
Step 2: Indicate the images to lazy load
Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.
For example:
1 2 3 4 5 | <!-- Before --> <img src="image.jpg" /> <!-- After --> <img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" /> |
Step 3: Instantiate Lazy Load in your JS document
Add the below Javascript code to your .js or .js.liquid file in the Assets directory and you are done.
1 | $(document).ready(function(){$("img.lazyload").lazyload();}); |
Hi, where do i add the code for images to lazy load (number 2)? Looking to start using lazy load images
Hi,
When I change src to data-src it can’t find the images….Any thoughts?
https://www.boltontechnical.co.za/
Hi, doing same for my all websites, but not working.
healthsupport.shop
healthsupporttoday.com
kapiyoga.com
Hello, thanks for your great tips.
Since our website has too many pictures, is there a way to add code to delay the loading of pictures outside the screen instead of selecting specific pictures.
Thank you very much. Our website: https://aligracehair.com
same problem as Elloit webb
Having the same problem as everyone else. Implemented the code, but the image isn’t loading — just a gray image. Something must be missing. I tried it on static hard-coded images, as well as images loaded through Shopify Liquid code.
Stuck on steps 3,
I couldn’t find any .js or .js.liquid file in my Asset directory
I had trouble with the data-src part so I tried to find an app that could do this for me. Lazify works great for images in the product description, no coding needed. If anyone’s looking, here’s the link: https://apps.shopify.com/lazify-lazy-load-images-1