Is it possible to preload a product's main image?

KmBerggren · ‎03-08-2025

I know how to preload the Hero Image on my home page, by putting a snippet of code into my Theme.Liquid, which includes the actual href of my image (because it is one image in one place, the home page).

HOWEVER - what snippet can I put in my Theme.Liquid that will ask it to preload the main image on EACH product page? Or would I put it into a different code file?

Obviously I can't put in a specific and actual href (image name, etc) because there are a couple hundred products.

Is there some sort of generic snippet that will ask it to just choose the first image in a product and preload it?

thank you in advance!

Sincerely, Katie

Promer-Alena · ‎03-10-2025

Yes, you can preload the main product image dynamically by adding this snippet to your theme.liquid file inside the <head> section:

{% if template == 'product' %}
<link rel="preload" as="image" href="{{ product.featured_image | img_url: '1024x1024' }}">
{% endif %}

This will automatically pull the featured image of each product and preload it. Adjust the image size (1024x1024) based on what’s used in your store for optimization.

Alternatively, if your theme uses main-product.liquid or product-template.liquid, you can add the preload link inside those files to keep it specific to product pages

KmBerggren · ‎03-10-2025

Hi Promer-Alena,

thanks for your time! I added this to my theme.liquid because there isn't a <head> in the other two liquid files.

But my Debug Bear and PSI scores stayed almost the same.

I am wondering if it is okay to add it at the top of the product.liquid even if there is no <head>?

Is it possible to preload a product's main image?

Is it possible to preload a product's main image?

Community Blog Articles