Shopify themes, liquid, logos, and UX
Hello, I'm currently trying to have certain images in the Empire theme load eager, rather than lazy. One such issue is that our logo in the header is marked to load lazy, when I'd rather it load eager by default.
The liquid to create the logo is the following:
<!-- Load Eager -->
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link
{% if block.settings.logo-inverted %} logo--has-inverted{% endif %}" style="padding-top: {{ 100 | divided_by: block.settings.logo.aspect_ratio }}%">
{{ block.settings.logo | image_url: width: 300 | image_tag: widths: "300,200,150,75", loading: "eager", alt: "COMPANY LOGO DESCRIPTION", class: "siteLogo"}}
</a>
I even included a comment because I thought I was going crazy with this being the output:
<!-- Load Eager -->
<a href="/" itemprop="url" class="site-header__logo-link" style="padding-top: 29.924242424242426%">
<img src="//STORE.com/cdn/shop/files/LOGO.png?v=1678141443&width=300" alt="COMPANY LOGO DESCRIPTION" srcset="//STORE.com/cdn/shop/files/LOGO.png?v=1678141443&width=300 300w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&width=200 200w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&width=150 150w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&width=75 75w" width="300" height="90" loading="lazy" class="siteLogo">
</a>
(I used placeholders for the URL, but you get the idea)
I have no idea why, but no matter what I do, the 'loading' attribute changes to lazy. Even with no attribute, it gets added. I've gone across all scripts on the store and there's nothing modifying attributes. My understanding of Liquid/Ruby is that it would have to change before the server even sent the HTML doc. Debugging didn't help either, as I tried to have the loading break upon attribute modification, but it never changes - it's just always lazy.
This is actually happening to all images on the site, so is anybody else experiencing this issue, or have an idea if maybe an app could be causing this? I'm hoping for some help or suggestions on how I could track down the issue.
Solved! Go to the solution
This is an accepted solution.
I solved this already. I found a third-party script that had been added by a previous developer that was making these changes!
This is an accepted solution.
I solved this already. I found a third-party script that had been added by a previous developer that was making these changes!
hello
I am having a problem with lazy loading with my product images on the product page of dawn theme
i tried everything to remove lazy loading from product thumbnail image but it always show loading:lazy
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024