I have attached 2 images of the way product images look, is it possible to make them look like the second image? The first image is on my current theme called motion whilst the second one is on dawn. Thank you for your help in advance.
Topic summary
Adjusting product image sizing on Shopify’s Motion theme to resemble Dawn. Two screenshots were attached, showing Motion’s images appearing more zoomed-in compared to Dawn.
Suggested change: In theme customization (Online Store > Themes > Customize), on the Collections page set the product grid to show 4 products per row. This did not address the zoom/cropping difference.
Resolution: The issue was fixed by adding CSS to theme.css:
- img[data-sizes=auto] { object-fit: contain !important; }
- .grid__image-ratio { position: relative; background-color: #fff !important; }
Explanation: The CSS property object-fit: contain ensures the entire image fits within its container without cropping, reducing the “zoomed-in” look. Setting a white background preserves appearance around non-full-bleed images.
Outcome: Problem resolved by user with custom CSS; no further action items noted. Discussion closed without remaining questions.
Hi @senxios
How is it going today?
Please follow these steps to fix this for the motion theme
- From your Shopify admin dashboard
- Navigate to Online stores > Themes > Select the main theme > Customize
- Select the Collections page from the pages selector at the top center
- On the Collections page, you can change the product grid to show 4 products per row
https://share.getcloudapp.com/X6uELNDw
Cheers!
Hi, I tried it but the images still look different, they are much more zoomed in on motion and I am not sure how to change it.
I managed to fix this myself btw. I added the following code to theme.css :
img[data-sizes=auto] {
object-fit: contain!important;
}
.grid__image-ratio {
position: relative;
background-color: #fff!important;
}