Help Resizing Collection Images and Product Page Images CSS

Store Design
, , , , , ,

Topic summary

A user migrated to a new Shopify theme and their previous CSS code for enlarging collection and product page images stopped working. The old code targeted .res-image with a 6/9 aspect ratio.

Solutions provided:

  • For collection images on the main page: Add CSS targeting img.w-full.h-full.object-cover with aspect-ratio: 6 / 12 !important; to the theme.css file
  • Alternative approach: Use img.object-cover as the selector with the same aspect ratio property
  • Implementation: Edit code through Online Store → Edit Code → theme.css, adding the snippet at the bottom

One responder successfully tested the collection page fix and provided a screenshot confirmation. Product page images couldn’t be tested due to the store having no products listed. An alternative suggestion was made to use a code injection app instead of direct theme editing.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I was using an old theme before where I was using CSS code to make my collection pictures bigger and my product page pictures bigger. But this code is not working on my new theme. Does anyone know how can I find the right code to use for my theme? I attached the screen shot of the old CCS code that was working.

1 Like
2

Hi @JLOVE1 .

Please, share the store URL and the code. Would be easier to help.

3

IMG_4626.jpg
IMG_4626.jpg1290×2445 79.8 KB

4

.res-image {
aspect-ratio: 6/9;
}

This is what was working for me before in the CSS field on my older theme. Now on the new theme, i tried so many variations. I cant seem to find one that works.

5

For the main page, here’s how to achieve that:

  1. Go to “Online Store”
  2. Three dots → Edit Code
  3. Find the theme*.css* file
  4. Add the following code at the bottom of the file
  5. Save and refresh the target store page
img.w-full.h-full.object-cover {
    aspect-ratio: 6 / 12 !important;
}

If done correctly, the result should be like this:

Screenshot_3.png
Screenshot_3.png1196×917 256 KB

Unfortunately, I can’t test the product page image as your store doesn’t have any products.

I hope this helps!

If you don’t want to edit the theme code directly, you can use a code injection app like the one in my signature.

6

Hi @JLOVE1 ,

Please change code:

img.object-cover {
   aspect-ratio: 6 / 12 !important;
}