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

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

ItsRendy
Visitor
2 0 1

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)

Replies 3 (3)

PaulNewton
Shopify Partner
7032 629 1481

‌‌‌‌⚠💣 Always backup themes before changing files 💣⚠‌

Hi @ItsRendy 👋  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


🐲🗺 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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


ItsRendy
Visitor
2 0 1
  • 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.
Flair-Liam
Shopify Partner
15 1 2

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

Shopify Theme Developer
Flairconsultancy.com
support@flairconsultancy.com