Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024