Prevent product card images from cropping

[d0ug]

I have my product cards image ratio set to square for uniformity but some of the product images provided by my vendor are not. Is there a way to make the image fit within the square rather than being cropped? It seems that the shorter side is fit and the longer edge cropped. I’d like the longer edge to fit into the square and space remaining filled white. Possible?

[tim_tairli]

Put this code into sections “Custom CSS” setting:

.card__media .media img {
  object-fit: contain;
}

[d0ug]

I don’t see custom css

Is there another place it could go?

[Mustafa_Ali]

hey @d0ug try this one with following steps

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

[d0ug]

This sort of worked. But can we get the space unfilled by the image to be white #ffffff and not gray?

[d0ug]

No worries about the gray. It’s the color scheme and I can fix that.

Thanks!

[d0ug]

Thanks Tim

[tim_tairli]

I strongly recommend not to edit theme code (at least in cases like this) because it will make it difficult to update your theme.

Using “Custom CSS” has no impact on this, but also has other benefits.

[d0ug]

How so?

[tim_tairli]

If you edit theme code Shopify is no longer able to automatically update your theme to a newer version. You’d have to manually move all these edits to a new version, which can be difficult if the edits are in several places and not well organized.

If using “Custom CSS” – these additions will be safely moved to a new version along with other theme settings.

Also, “Custom CSS” in section settings slightly modifies the rules to limit them to this particular section only which is great – less testing is necessary whether something is unintentionally affected somewhere else.

[d0ug]

Thanks for the insight!