New Shopify Certification now available: Liquid Storefronts for Theme Developers

Add lazy loading to dawn

45 1 6

Hello! I am making a website using the dawn 10.0 theme and am wanting to add lazy loading to my pictures.  Currently they are loading in segments which does not look the best especially for people with bad Wi-Fi or cell service. The website is called and anything would help to make it look better! Thanks!


ps any store feedback would also be greatly appreciated. Have a great day or night!

Replies 3 (3)
Shopify Partner
15736 2353 3051

Hello @nhellyer 

You will modify the theme code: 

1. Online store > themes

2. Actions >Edit Code. 


Next, you must modify the theme code to enable lazy image loading.

 1. under the section >theme.liquid 

2. locate the file <head>  section of the file, usually near the top.

3. Add the following code within the <head> section to include a lazy loading js library.



<script src="//" async=""></script>



This code will load the lazy sizes library from a CDN.


After saving the changes, the lazy loading javascript library will be included in your theme.


Next, you will need to update the image tags in your theme to utilize lazy loading: 


1. locate the code for the image tags in your theme files. (eg. product templates, collection templates, etc.).

2. Replace the src attribute of the image tag with data-src. This will specify the actual image source that will be loaded lazily

3. Add lazyload class to the image tag.


Here is an example of how the updated image tag should look:



<img data-src="{{ image.url }}" alt="{{ image.alt }}" class="lazyload">



Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
2 0 0

Thanks, I'm trying to do this myself too. Could you provide an example of how i can locate in the theme files please?


When i go to the code templates e.g. "Product.json" or "Collection.json" I don't see the code I should be replacing. 


Appreciate your help on this 🙌

Shopify Partner
844 150 168

Hello @nhellyer 

Image lazy loading is a feature which need to be coded manually. Most themes do not support lazy loading. Unless you want to rebuild your homepage with custom code or a page builder, I think it is not possible with default Dawn homepage.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at