How to Easily Add Lazy Loading for Images in Shopify

Hura Product Showcase Builder

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.

Hura Theme Blocks

You may also like...

8 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.

  7. Wilson says:

    Stuck on steps 3,
    I couldn’t find any .js or .js.liquid file in my Asset directory

  8. Jeremy says:

    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

Leave a Reply

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