Turn Off Lazy Loading On Featured Collection

Technical Q&A
,

Topic summary

A user is experiencing lazy loading issues with images in featured collections on their Shopify homepage. Images don’t preload when scrolling, and they want to disable lazy loading specifically for these three featured collections.

Proposed Solution:
Another user suggests manually editing the theme code by:

  • Navigating to Shopify Admin > Online Stores > Edit Code
  • Opening the “featured-collection.liquid” file
  • Searching for “lazy” and replacing it with “eager”

Current Status:
The original poster checked their featured-collection.liquid file but found no instances of “lazy” in the code. They shared their file contents, which only contains CSS imports and HTML structure without explicit lazy loading attributes.

The issue remains unresolved, as the suggested fix doesn’t apply to their specific theme implementation. The lazy loading may be configured elsewhere in the theme or through a different mechanism.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi, hope you’re well! :slightly_smiling_face: When scrolling along a featured collection on my homepage, images aren’t preloaded.

I wonder if there’s a way to turn off lazy loading just for my 3 featured collections on the homepage (supposing that’s the cause as I had some work done a while back to speed up my website).

Thanks for your time & care.

Asa

2

This cannot be resolve by css property. This need to fix manually in the theme code.

Here is how you can do this.

  1. First you need to go shopify admin.
  2. Click on online Stores > Edit Code
  3. In the Edit Code search for “featured-collection.liquid” file.
  4. Press ctrl + f and search for “lazy”.
  5. After that replace it with eager.

By applying this will apply on all featured collection on your homepage.

1 Like
3

Hi, thanks for this!!

I checked featured-collection.liquid and there is no mention of lazy. Only this:

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}

{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == ‘blob’ %}
{{ ‘mask-blobs.css’ | asset_url | stylesheet_tag }}
{%- endif -%}

{%- unless section.settings.quick_add == ‘none’ -%}
{{ ‘quick-add.css’ | asset_url | stylesheet_tag }}

{%- endunless -%}

{%- if section.settings.quick_add == ‘standard’ -%}

{%- endif -%}

{%- if section.settings.quick_add == ‘bulk’ -%}

{%- endif -%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- liquid
assign products_to_display = section.settings.collection.all_products_count

if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif

assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif

assign show_desktop_slider = false
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}

{%- if section.settings.title != blank -%}

{{ section.settings.title }}

{%- endif -%} {%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
{%- if section.settings.show_description -%} {{ section.settings.collection.description }} {%- else -%} {{ section.settings.description -}} {%- endif %}
{%- endif -%}
    {% assign skip_card_product_styles = false %} {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
  • {% render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, skip_styles: skip_card_product_styles, section_id: section.id, quick_add: section.settings.quick_add %}
    • {%- assign skip_card_product_styles = true -%} {%- else -%} {%- for i in (1..section.settings.columns_desktop) -%}
  • {% liquid assign ridx = forloop.rindex case ridx when 5 assign ridx = 1 when 6 assign ridx = 2 endcase %} {%- assign placeholder_image = 'product-apparel-' | append: ridx -%} {% render 'card-product', show_vendor: section.settings.show_vendor, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, placeholder_image: placeholder_image %}
    • {%- endfor -%} {%- endfor -%}
{%- if show_mobile_slider or show_desktop_slider -%}
{% render 'icon-caret' %}
1 / {{ 'general.slider.of' | t }} {{ products_to_display }}
{% render 'icon-caret' %}
{%- endif -%}

{%- if section.settings.show_view_all and more_in_collection -%}

{%- endif -%} {% if section.settings.image_shape == 'arch' %} {% render 'mask-arch' %} {%- endif -%}