I want to find the liquid file for a specific snippet of code that is lazy loading a major element

Hello, i have a problem with my store where an image takes a long time to load beacuse it’s lazy loading. I have found the code snippet in the chrome inspector but i can’t seem to find it in the code for my shopify store. Is there an easy way to find this or is it just trial and error? I have tried looking at liquid files with relevent names but haven’t found anything. The image is in a collage and is the thing on the top of the page just below my header and annoucement bar if that helps. (Im using the refresh theme)

1 Like

‌‌‌‌:warning: :bomb: Always backup themes before changing files :bomb: :warning:

Hi @ItsRendy :waving_hand: make sure the image asset itself has been optimized

Hello, i have a problem with my store where an image takes a long time to load

:dragon_face: :world_map: Here be dragons if you don’t keep it in mind that this is a good thing, the entire point of lazy loading is that large hog images don’t drag down the entire rest of the site.

Exercise caution on disabling lazyloading of media DO NOT whole cloth disable all lazy loading in the theme.

Think through the business logic and create liquid conditions that only disable lazyloading in specific conditions.

Do speed tests before AND after.

This can impact the bottom line in substantial ways, you’ve been warned.

For dawn based themes like refresh follow the trail > locate the section for “collage”

https://github.com/Shopify/dawn/blob/main/sections/collage.liquid > find(ctrl+f) “render” or “lazy” > render ‘card-product’ > https://github.com/Shopify/dawn/blob/main/sections/collage.liquid#L96 > find(ctrl+f) “render” or “lazy” > https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid

Also maybe see https://github.com/Shopify/dawn/blob/main/snippets/product-media.liquid in some cases.

alot of well made themes may have a “media” “image” or similarly named snippet specifically for rendering such assets.

For other themes it is a matter of digging especially if you don’t bother to clarify which theme you are having:

If you need theme performance customizations contact for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

  • Im well aware that lazy loading in general is a good thing and i definetaly will test the speed before and after. Thank you for the recommendations i will try them soon. And yes all images on the site have been optimized as far as i know.

Hi Rendy,

You’ll become familiar with the structure of shopify themes over time, so can often locate what you need based on what you see in the inspector. That being said I often will find it in the inspector then search through all files with something like VS code.

Hope this helps!

Kind regards, Liam