Streched Product images on collection page

[Yarin2]

Hi,

I’m using Dawn theme and I have an issue with product’s thumbnail on collection pages.

For example, this is the image of one of the products as shown in the collection page:

While, this is the actual image:

How can I resize the zooming of this picture so the whole picture will be entered inside the thumbnail?

Thanks!

[ThomKnepper]

Hi there,

Super easy fix for this one! Go to your “Customizer”, click in the top menu to “Collections”, then in the left sidebar click on “Product grid” and then change the aspect ratio!

Hope this helps!

[Yarin2]

Thank you for your answer.

If you’re talking about this option - it has no effect at all.

[niraj_patel]

Hello @Yarin2
Can you share store URL?

[Dan-From-Ryviu]

Go to your Online store > Themes > Customize > Collections > Default collection > Product grid > Product card > Image ratio > Adapt to image > click Save

If it still does not solve the issue, please drop your store URL here so I can provide a CSS code to solve it for your store.

[Yarin2]

this is the link: https://f590e3-3.myshopify.com/

thank you.

[Dan-From-Ryviu]

I recommend you update that image to this version to solve the issue

[ThomKnepper]

Then simply make sure all your images have the same aspect ratio. I would recommend 1:1 so an image of 2000x2000 pixels for example. The “code issue” you’re encountering is not a code issue, its a asset issue.

[Yarin2]

Thank you. Can you please explain the format? what is different?

[Dan-From-Ryviu]

This is mage is square

[niraj_patel]

Hello @Yarin2

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.product .thumbnail img { object-fit: contain !important; }

[Yarin2]

I’m sorry, I didn’t understand.

I tried to take another image and match the sizes to the image you’ve sent - but still same issue.

[moderncorner]

hi there, just a little help in the exact potition to copy the code in the theme.css file.

thank you