Keeping image ratio the same in Dawn theme's product grid

[VHWein]

Hey there,

I have a question regarding to the Dawn theme’s product grid. I have images that vary in size and it won’t be possible for me to change the images themselves during the upload since they are provided by another API source entirely.
Trying the various image shapes and image ratios (Portrait, Square, Arch, Blob ect… ) that the Dawn theme offers also won’t work since these always cut off a part of the picture.

Currently I have “Adapt to image” selected but with this option the images are all over the place.

Hence the question: I’m assuming I’d have to hardcode the display-size of the images in order for them to all be shown with the same height. How would I go about this? Or is there another possibility?

This is how it looks right now but I need all these bottles to be displayed in the same size:

Thanks for the help!

[Abdosamer]

Hi @VHWein , can you share your store url?

[VHWein]

Hey there,

here you go:

https://a3ac76-2.myshopify.com/collections/all
Pw: rteeth

[Dan-From-Ryviu]

Could you share your store link to check?

[VHWein]

Hey there,

here you go:

https://a3ac76-2.myshopify.com/collections/all
Pw: rteeth

[Abdosamer]

@VHWein , go to component-card.css and add the following code:

.card__inner {
    width: 100%;
    height: 100% !important;
}

[Dan-From-Ryviu]

Did you change Image ratio in Online store > Themes > Customize > Collections > Default collection > Product grid > Image ratio > Square

[VHWein]

Hey there,

yes I did try that but none of these options is viable since it cuts off parts of the image. This is what it would look like:

[Abdosamer]

@VHWein , Did you try the solution?

[VHWein]

Hey there,

thanks for the help!

I tried that now and it works to a certain degree. I think it puts the text + images together at the same height now, but the images themselves still vary in their size.

I think it also takes the biggest picture within a row as guideline because I have rows now that are displayed WAY smaller than others, e.g:

It would be cool if there was a solution that displayed all images within the shop the same size

[Abdosamer]

@VHWein , add this code to the same file :

.product-card-wrapper .card__inner {
    --ratio-percent: 100% !important;
}

[Dan-From-Ryviu]

Please set it as Square then I can provide the code to make image not cut off

[VHWein]

remove the previous code or keep it together with the new one?

[VHWein]

I set it as square now

[Abdosamer]

@VHWein , remove the previous code.

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code after

[sheadaddy1717]

i tried your recommendations but it didnt work for my store. i am usung the dawn theme. here is a link:

:https://b720b7-2.myshopify.com/?_ab=0&_fd=0&_sc=1