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

Leave a Reply

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