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

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

Key1
Visitor
2 0 0

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 %}
<img src="{{ section.settings.image | img_url: 'x1024' }}" class="img-responsive" alt="{{ section.settings.image.alt }}">
{% else %}

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

Many thanks ; )

Replies 2 (2)

savga
Tourist
3 0 6

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

 

+10 years - Shopify Developer... for hire 😉
Key1
Visitor
2 0 0

Thanks so much Savga for responding so quickly!!

I'll add the code now ; )

Thanks again!