Hey all, really trying with this one
My theme is cropping my photos of products to a square - making them just look cut off
Is there any way to fit the image to the product, or something?
see attached -
Topic summary
A user reported that product images in their Dawn theme collection pages were being cropped to squares, cutting off the full product view.
Solutions Offered:
-
Adjust image height settings: Modify product display section heights (desktop: 500px, mobile: 250px)
-
CSS override for object-fit: Add
object-fit: contain !important;to base.css, though this removed rounded corners -
Theme customization settings (recommended): Navigate to Customize > Collections > Product grid > Image ratio and select “Portrait” or “Adapt” to display full images without code edits
-
Custom CSS alternative: Use
--ratio-percent: 150% !important;in Custom CSS settings to control aspect ratio while avoiding theme file modifications
Resolution:
The issue was successfully resolved using the theme’s built-in image ratio settings, which preserved the desired rounded corners and avoided direct code edits that could complicate future theme updates.
3 Likes
Edit the height o your products photos in the products display section.
Recom: desktop - 500
mobile - 250
Did you get it resolved?
Hi @IronAffinity , can you share store url?
https://ironaffinity.com.au/collections/hoodies-w
This is the particular collection im refering to right now - currently editing the other model photos for the other collections..
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
img.motion-reduce {
object-fit: contain !important;
}
Result
Best,
DaisyVo
is there a way to do this and maintain the soft curved edges/corners?
The Dawn theme has an option to change images in the product card to portrait. You can see it from store admin > Sales channels > Online store > Themes > Customize > click Homepage dropdown > Collections > open collection template > product grid > Image ratio
1 Like
@Dan-From-Ryviu solution is proper. You should try either “Portrait” or even better – “Adapt”.
Also – avoid editing theme code – this will make your theme updates problematic.
If Dan’s solution does not work for you, you can instead add the following code to the section’s “Custom CSS” setting or “Theme Settings”=> “Custom CSS”:
.card--media, .card--media> * {
--ratio-percent: 150% !important;
}
And replace 150 with whatever better fits your images.
1 Like
Yessss this is exactly what i wanted!! thank you so much
1 Like