fbpx

BOOST your sales 50% with upsells 💸Show me

Increase sales by 50%... 💸Boost my sales!

Limited Time: 14 day free trial + pay only $1 for your first monthClaim!

14 day free trial + pay only $1 for your first monthClaim!

How to easily add ‘Lazy Loading’ to my Shopify store

lazy-loading

Want to increase conversions?

Show a beautiful visual countdown timer to increase conversions, manage customer expectation and reduce customer service.

Last Updated on January 7, 2022 by LAUNCHTIP

How to easily add ‘Lazy Loading’ to my Shopify store

According to a 2017 blog post called Beyond the Bubble, the average Internet speed around the globe is just 7mb/s. Therefore, it’s likely that your product pages are not loading as fast for the customers as you would want them to. 

An easy workaround is to add lazy load to your pages. The technique involves delaying the initialization of an object unless it’s required. It’s mainly used for images on a website. 

On the one hand, it improves performance and speed. On the other, it makes your customers think that the products are loading quicker in a phenomenon called perceived performance. 

You can add a lazy load to your Shopify store in the following ways. 

Add lazy loading script 

In this method, you’ll have to add a certain code to your store. Here’s how to do it. 

  • Go to Shopify admin and select Online Store. 
  • Select Themes and choose the theme you intend to edit. 
  • Select Actions and click on Edit Code. 
  • Go to the Layouts directory. 
  • Click on themes.liquid. 
  • Then, paste the following code before the </head> tag in the online code editor.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}

 

Save the changes. Now, the images in your store will be lazy-loaded. 

Add lazy loading to particular images 

You can also specify which images should be lazy-loaded if you do not want to apply the setting to the whole store. If you want a specific image to lazy load, apply the class ‘lazyload.’ Plus, replace the src attribute with data-src. 

<!-- Before -->

<img src="image.jpg" />


<!-- After -->

<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />

 

Add lazy loading to JS document 

If you add this Javascript code to the js.liquid or .js file on your store’s Assets directory, lazy load will be added to the site. 

$(document).ready(function(){$("img.lazyload").lazyload();});

 

 

Want bigger orders?

Unlock instant revenue from your Shopify store with SellUp. Set and forget upsells that work 24/7, even whilst you sleep.

More To Explore