My product images are cropping

Shopify Discussion

Topic summary

A bookstore owner is experiencing image cropping issues on collection pages, where rectangular book covers are being cut off. The problem specifically affects product images displayed in grid layouts on collection pages.

Initial Solution:

  • Multiple users suggested adding CSS code to the theme’s custom CSS or base.css file
  • The recommended fix: .product-card__image img { object-fit: contain; }
  • This changes the image display from cropping (cover) to fitting the entire image (contain)
  • The solution initially worked successfully

Current Status:

  • The issue has resurfaced after the store owner changed themes
  • The same CSS code that previously worked is no longer effective with the new theme
  • The problem remains unresolved and requires a new solution specific to the current theme

The discussion demonstrates that CSS solutions for image display are theme-dependent and may need adjustment when switching Shopify themes.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I have a bookstore and many of my images are cropped. Since I have so many books in my collection, I was hoping I could edit the theme and not have to resize each individual picture. Is this possible?

my URL is https://www.storiesofacolorfulworld.com/

2 Likes
2

Hi @Stories1

welcome to the community, you mean the product images in the collection page were croped or product image on product page were croped?

3

The product images on the collection pages are cropped.

4

can you point out detail?

5

Here’s the URL for one of my collections https://www.storiesofacolorfulworld.com/collections/10-and-under . Many of the books that I carry are rectangular cutting.

6

Maybe it’s ok?

because some image is vertical rectangle

BiDealDiscount_0-1746801562918.png
BiDealDiscount_0-1746801562918.png1362Ă—931 328 KB

7

This:

.product-card__image img {
  object-fit: contain;
}

You can add it to “Custom CSS” either in section settings or in Theme Settings.

From:

Screenshot 2025-05-10 at 12.39.32 AM.png
Screenshot 2025-05-10 at 12.39.32 AM.png985Ă—409 344 KB

To:

Screenshot 2025-05-10 at 12.39.40 AM.png
Screenshot 2025-05-10 at 12.39.40 AM.png985Ă—409 270 KB

8

Hi @Stories1

if yes, let try to add custom css below:

.product-card__image img, 
.product-card__image [style*=--aspect-ratio].placeholder__svg--bg svg {
  object-fit: contain;
}
9

Hello @Stories1

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.product-card__image img {
object-fit: contain;
}

devcoders_0-1746808704955.png
devcoders_0-1746808704955.png1296Ă—583 379 KB

10

This worked perfectly. Thank you!

1 Like
11

Hello @Stories1
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

12

I changed my theme and realized that my images are cropped again. I tried to put this same code in but it didn’t work this time.