How can I implement lazy loading on Dawn 10.0 theme images?

nhellyer · ‎06-21-2023

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 https://dallaspercussion.com 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!

oscprofessional · ‎06-21-2023

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="//cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" 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">

Pandoro · ‎10-02-2023

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 🙌

ZenoPageBuilder · ‎06-21-2023

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

How can I implement lazy loading on Dawn 10.0 theme images?

How can I implement lazy loading on Dawn 10.0 theme images?

Community Blog Articles