Pipeline Theme Lazy Load

New Member
8 0 0

I'm trying to set up lazy loading on images. I've added the javascript library and the script tag, but I don't know how to add the "lazyload" class and data-src placeholder.

 

I'm guessing it has to be somewhere in the collections.liquid:

 

<div data-section-id="{{ section.id }}" data-section-type="collection">
{% if collection.image %}
{%- assign img_url = collection.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="homepage-image preventOverflow {{ section.settings.text_color }} {{ section.settings.image_height }}" id="FeaturedImage-{{ section.id }};"
{% if section.settings.parallax %}
data-parallax-src="{{ collection.image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480, 5800]"
data-aspectratio="{{ collection.image.aspect_ratio }}"
data-sizes="auto"/>
{% endif %}>
<div class="content--centered">
<div class="text-center preventOverflowContent">
<h1 class="title--flex">{{ collection.title }}</h1>
{% if collection.description.size > 0 %}<div class="content--flex rte">{{ collection.description }}</div>{% endif %}
</div>
</div>
<div class="image-overlay image-overlay-{{ section.settings.overlay_opacity }}"></div>
{% if section.settings.image_height == 'use_image' %}
<div class="lazy-image" style="padding-top:{{ 1 | divided_by: collection.image.aspect_ratio | times: 100}}%; background-image: url('{{ collection.image | img_url: '1x1' }}');">
<img class="lazyload fade-in" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
alt="{{ collection.image.alt | default: collection.title }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100, 4480, 5800]"
data-aspectratio="{{ collection.image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
</div>
{% endif %}
{% if section.settings.parallax == false and section.settings.image_height != 'use_image' %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: collection.image %}"></div>
{% endif %}
<noscript>
<img src="{{ collection.image | img_url: '1440x' }}" alt="{{ collection.image.alt | default: collection.title }}" class="responsive-wide-image"/>
</noscript>
</div>
{% endif %}

0 Likes

Hello 

Refer below url that may help you:

https://easycodeguide.com/add-lazy-load-image-shopify-theme.html

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
8 0 0

Thanks for the article! This is what I was already following. I've done 1 and 2, but stuck on 3. Where exactly do I paste those snippets?

0 Likes