There is this setting i need, for product images to be shown correctly. The problem is i have a lot of 2x4 or 4x2 images, and dawn theme does not support showing as a 4x4 a 2x4 photo. I need the values that i should enter in theme settings. Many thanks !
Topic summary
A user with approximately 30,000 product photos in varying rectangular dimensions (2x4, 4x2) needed help displaying them as square (1:1) images in the Dawn theme without manual editing.
Initial Problem:
- Rectangular product images were being cropped/cut off in collection and product card displays
- Dawn theme lacked built-in settings to handle non-square images properly
- Other themes (Enterprise, Ignite) had this feature, but Dawn did not
Solution Provided:
A community member (Ahmad31) provided custom CSS code to be inserted in theme.liquid before the </head> tag:
.card.card--card.card--media.color-scheme-1.gradient img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: auto;
}
An additional snippet was needed for product pages within collections (using color-scheme-2 class).
Outcome:
- The CSS solution successfully resolved the image display issue
- Images now show completely without cropping, centered within their containers
- No bulk image editing required
- User confirmed the solution worked perfectly
Hi @tudor3 in theme.css paste this code and save :
.product-card__image, .media > img {
object-fit: contain;
width: 100%;
height: auto;
}
if you don’t find theme.css paste this code in theme.liquid before tag
.product-card__image, .media > img { object-fit: contain; width: 100%; height: auto; }
wait, its before . wait a minute i try again
It didnt work either. Product cards still show cut photos and now also banner from front page looks messed up
HI @tudor3
Please share your store link please
1 Like
Hi @tudor3 you want like this ?
paste this code in theme.liquid before tag
.card.card--card.card--media.color-scheme-1.gradient img { width: 100%; height: 100%; object-fit: contain; display: block; margin: auto; /* Centers the image within the container */ }
1 Like
Great, this works for the collection images. I also need for products to display correctly inside the collection itself
Also you have some products with white backgroud use png images without backgroud they make a better UI. make product image dimensions 600*600 and also remove their backgrounds.
Well, that is the problem. I have about 30k product photos, i cant edit them in bulk, i dont know how. Manual edit will take ages. Sizes vary a lot. When i used enterprise or ignite theme as theme trial, they have a setting that allows the products to appear OK
@tudor3 if you want anytype of help regarding products issues or any other custom development work i am available for your help, let’s fix your problem
also paste this code in previous tag which i provide you recently :
.card.card--card.card--media.color-scheme-2.gradient img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: auto; /* Centers the image within the container */
}
1 Like
i cant believe my eyes it worked !!! omgg so many thanks!!!
That’s fantastic to hear! I’m thrilled that the solution worked perfectly for you! 
If you’d like to show your appreciation and “buy me a coffee,” it would absolutely make my day!
1 Like