Struggling with where to enter the code: loading="lazy"

Technical Q&A
1

Hi all,

I know that lazy loading can be achieved by adding the code loading=“lazy” to the image tags. However, I’m not sure how/where to add the code to our ‘Featured Products’ section on our home page. If I’ve found the correct part of the code, our ‘Featured Products’ section appears as follows:

<a href=“{{ section.settings.link }}” class=“link-img-hover”{% if section.settings.image == blank %} style=“display: block;”{% endif %}>
{% if section.settings.image != blank %}
{{ section.settings.image.alt }}
{% else %}

If someone could let me know how to add the loading=“lazy” code, that would be great!

Many thanks ; )

2

Hi, it is easy, add it to the img tag, eg

<img src=“{{ section.settings.image | img_url: ‘x1024’ }}” class=“img-responsive” alt=“{{ section.settings.image.alt }}” loading=“lazy”>

this tells the browsers to use native lazy loading, depends on the user browser if it is supported

let me know if you have more doubts

thanks

3

Thanks so much Savga for responding so quickly!!

I’ll add the code now ; )

Thanks again!