Hi, I’m using the Heritage theme on Shopify and I need help adding fetchpriority=“high” and loading=“eager” to the hero image in my homepage banner section. This is to improve my mobile LCP score. Can anyone help with the exact code change needed?"
I’m not very familiar with this area. Can you help me?
Hi @raynnn
I do not think you need any changes.
Heretige theme is part of Horizon theme family and they share the code. So in hero.liquid horizon/sections/hero.liquid at e038e9b6daf4aae4f01d627b71267fd57ed8a89c · Shopify/horizon · GitHub, you have this
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
So if the section is the first one, it will get high fetch priority.
For eager loading, I think it has less influence and also that you do not need it. Shopify with image_tag adds auto loading="lazy" to images further down a page. But for hero, the image is loaded straight away, so you do not need to add loading: ‘eager’ explicitly, because it is already happening.
The suggestion shared above looks worth checking first. If the Heritage theme inherits the Horizon implementation and already sets fetchpriority to high for the first hero section, then you may not need to make any code changes.
I’d recommend verifying whether your hero.liquid already passes fetchpriority: fetch_priority to the image_tag. If it does, then the optimization is likely already in place. If not, then adding it manually would make sense.
If you’re still seeing poor mobile LCP after confirming that, feel free to share the complete image_tag block and we can take a closer look.
Heritage is part of the Horizon family.
Its sections/hero.liquid already sets fetchpriority="high" on the banner image, and the banner is not lazy-loaded, so loading="eager" adds nothing.
But the high priority only when the banner is the very first section on the page:
if section.index == 1
assign fetch_priority = 'high'
endif
If anything sits above your banner (an announcement row, a text section, a spacer), section.index is no longer 1 and the image quietly drops back to fetchpriority="auto". That is usually why LCP stays slow.
Check what you have
- Open your homepage, right-click the banner image, Inspect.
- Look at the
<img>tag. fetchpriority="high"means you are already optimized, nothing to do.fetchpriority="auto"means your banner is not the first section.
Fix A, no code: In the theme editor, drag the banner so it is the first section under the header. It gets fetchpriority="high" automatically.
Fix B, code: In sections/hero.liquid, change:
if section.index == 1
to:
if section.index <= 2
Now the banner keeps high priority even with one small section above it. Raise the 2 if more than one section sits above the banner.
