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.liquid to open it in the online code editor.
  • In the online code editor, add the below code before close </head> 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:

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.

You may also like...

6 Responses

  1. Elliot Webb says:

    Hi, where do i add the code for images to lazy load (number 2)? Looking to start using lazy load images

  2. Andrew Peter Hansen says:

    Hi,

    When I change src to data-src it can’t find the images….Any thoughts?

    https://www.boltontechnical.co.za/

  3. Ahsen says:

    Hi, doing same for my all websites, but not working.
    healthsupport.shop
    healthsupporttoday.com
    kapiyoga.com

  4. aligrace says:

    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

  5. Siddharth says:

    same problem as Elloit webb

  6. Nick says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *