Hello,
I’ve been following some instruction I found online but am getting stuck on adding a class to image tag (step 3).
Does anyone know how to locate the image tag for the theme?
website: follownoonestore.com
theme: Label
Topic summary
Main issue: implementing lazy loading on the Shopify Label theme; the poster is stuck finding where to add a class to the image tag. A screenshot was shared; no theme code was provided.
Key guidance:
- Add the HTML attribute loading=“lazy” to img tags to defer image loading until they enter the viewport. This should be applied to images not immediately visible at the top of the page.
- In Shopify, images appear across multiple sections and snippets, making it hard to locate every img tag manually.
Suggested approach:
- Write custom code that selects all img elements in the theme and adds loading=“lazy” programmatically.
- Example markup:
.
Context and clarification:
- Lazy loading is a browser feature that delays non-critical image loading, improving initial page load performance.
- One reply included a minimal example; no detailed code or specific theme file paths were provided.
Status: discussion offers solutions but no confirmed implementation. Action items: either edit relevant theme templates/snippets or add a global script to set loading=“lazy” on all images.
1 Like
Hi @Sensei_Ryan ,
You need to add loading=“lazy” to your img tag. You only add this loading lazy to the image that you want to load later or not on the top of the browser when the browser loads
Hello @Sensei_Ryan ,
Finding each “img” tag is quite complex as we are using multiple sections or snippets in the Shopify theme.
To get this issue resolved and implement Lazy loading properly first you need to write a custom code for selecting all “img” tags and then add this attribute loading=“lazy” as shown in the below-provided code.
This will properly implement lazy loading. Let us know if you need any help with this.
Regards,
CedCommerce