Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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 ; )
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
Thanks so much Savga for responding so quickly!!
I'll add the code now ; )
Thanks again!