Responsive Product Images

Store Design
,
1

I need to add responsive product images to my theme for my homepage. I am using the “Craft” template. I understand using the code to determine the different image widths, but where do I put it? The only instructions say “put it anywhere you use images.” Is this possible for my theme or will I need a new one entirely?

2

Hi @cimarron,

Can you explain more about ‘responsive product images’, I will check and guide you to change it

3

So this is the basis of what I’ve been reading. Responsive images on Shopify with Liquid – Performance @ Shopify

Then I found this code, but I don’t know where to even begin putting that:

4

Hi @cimarron,

I checked and this works for almost all themes, including the Craft theme.
So you don’t need to edit it, it’s already added by the theme.
Hope it is clear to you.
If I helped you, then a Like would be truly appreciated.

5

Hi there! :waving_hand: Great question.

Yes, the Craft theme does support responsive images, and you don’t need to switch themes to implement this. When the instructions say “put it anywhere you use images,” they’re referring to the actual <img> elements in your theme files — typically inside your homepage template or sections.
and you are using free its can be showcase your product to make you get visitor?

6

Where do I put the code to add it to the theme?

7

Hi @cimarron,

It is already there, you don’t need to install additional code.
You can see it in the card-product.liquid file or any file with images

8

No, my images don’t change based on the viewing size. I need responsive images to boost my page speed for Google.

9

Hi @cimarron,

Please send the website link, I will check it for you

10

Hey @cimarron,
Could you please share the store url along with the password [if applicable] so that I can take a look and provide you solution code for the product card images responsive issues.
Waiting to hear back from you.
Thanks

11

Every theme in Shopify theme store has to use responsive images, otherwise it would not be accepted there.

Yes, sometimes they do not work 100% in some edge cases, but still.

However, this 10 year old piece of code you’re looking at is not something you’d want to implement now – a lot has changed since it was relevant.
(and trust me – it was not relevant 10 years ago too).

If you’re having problem with some images not being responsive in your store, better provide a link to the page in question to receive any help.

1 Like
12

Hi @cimarron , Please share the URL of your store with us to test and analyze the problems for responsiveness. Till then for to add the responsiveness in the image for the theme, you can add the following line of code -
Example -

<img
  src="{{ 'image-default.jpg' | asset_url }}"
  srcset="{{ 'image-small.jpg' | asset_url }} 480w, 
          {{ 'image-medium.jpg' | asset_url }} 768w, 
          {{ 'image-large.jpg' | asset_url }} 1024w"
  sizes="(max-width: 480px) 480px, 
         (max-width: 768px) 768px, 
         1024px"
  alt="Product image"
  class="responsive-img" />

Alternatively, if you are frustrated with this issue and want an automated solution, I recommend trying Website Speedy- a Shopify app that handles image optimization on its own to increase the page speed ultimately. It comes with a 14-day free trial.

(Disclaimer: We are part of the developing team and are always here to assist you in every problem you may face, so you can ask anything.)

13

Hi @cimarron ,

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

14

The reason I’m looking into this is because my PageSpeed Insights report specifically said to add responsive images to improve my site. The link is https://RedSaguaroTradingPost.com

15

@The_ScriptFlow @tim_1 The reason I’m looking into this is because my PageSpeed Insights report specifically said to add responsive images to improve my site along with using next-gen formats and properly sized images. The link is https://RedSaguaroTradingPost.com

16

Sorry, I’m new to this forum and my posts are being flagged. I will post my site like this: red saguaro trading post dot com < in hopes that you will see it and help me out. I am looking for this solution because pagespeed insights specifically said I need responsive images.

17

Hi @cimarron,

I checked and the code includes this, so it works fine. You can refer to this screenshot of the code:

Screenshot
Screenshot1920×916 122 KB

So, about this feature, I think you shouldn’t worry too much, it has been added to the theme’s default code and is working fine.
Hope it is clear to you

1 Like
18

This is very interesting, thank you for showing me. I am still working with pagespeed insights attempting to fix my site. The major issue it now shows is “improve image delivery” by using a modern image format or increasing compression. How would I go about fixing this issue?

Screenshot (224)
Screenshot (224)1920×970 72.2 KB

19

Not much you can do here without significantly re-writing your theme code and making your life a mess.

In fact, Shopify already serves your images in modern formats, for example:

Screenshot 2025-08-22 at 12.57.57 PM
Screenshot 2025-08-22 at 12.57.57 PM699×195 29.1 KB

It’s a screenshot from the Chrome DevTools console Network tab –
See the “webp” in format column even though image file is still “.jpg”?

However, it’s true – not all images are served as webp and I have no idea what criteria Shopify image engine uses to decide – there is no control for this in theme code.

To summarize – ignore this recommendation.

20

hi @cimarron ,
You don’t need a new theme - Craft already supports responsive images out of the box, but if you want custom responsive image handling (like controlling which sizes are served), you’ll just add the code inside the Liquid file where the image is output.

In Shopify themes, homepage images usually come from:

  • Sections → sections/ folder (featured-collection.liquid, image-banner.liquid, image-with-text.liquid, etc.)
  • Snippets → snippets/ folder if the section pulls in a shared image component.

Anywhere you see something like:

{{ section.settings.image | image_url: width: 1200 | image_tag }}

Replace above code with the following:

<img 
  src="{{ section.settings.image | image_url: width: 600 }}" 
  srcset="
    {{ section.settings.image | image_url: width: 400 }} 400w,
    {{ section.settings.image | image_url: width: 800 }} 800w,
    {{ section.settings.image | image_url: width: 1200 }} 1200w,
    {{ section.settings.image | image_url: width: 1600 }} 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ section.settings.image.alt | escape }}"
  loading="lazy"
/>