Simple Theme: Make Images all the same size on collection pages and product page

Topic summary

Goal: make product and collection images the same size (clean, uniform rows) across Shopify themes, starting with Simple.

Key fix (Simple/legacy themes): add CSS in Online Store → Theme → Edit code → theme.scss.liquid or theme.css to force square thumbnails: set wrapper padding-top to 100% and image height to 100% with object-fit. This aligned grid and product images for several users.

Collection page adjustments: for grid-view items, use a square wrapper and object-fit. If images get cropped, switch object-fit from cover to contain to preserve full image; this solved mobile cropping for one store.

Other themes:

  • Dawn: suggested base.css .card–product .media padding-bottom: 100%; one user reported layout issues and reverted; status unclear.
  • Debut/Fashionopolism/Studio: requests for uniform sizing and layout changes (e.g., 5 items on one line) remain pending.

Additional request: move collection titles below images; acknowledged but no code shared.

Access note: a password-protected store shared password; custom product-card CSS was provided and confirmed working.

Status: mixed. Several confirmations of success on Simple/related setups; multiple users still report non-working code, product-page-only sizing, and theme-specific issues; screenshots are central to troubleshooting; discussion ongoing.

Summarized with AI on December 31. AI used: gpt-5.

I take and edit my items with the iphone. After I upload the images to shopify on the “simple” theme they all display differently on the product page and the collection pages. Does anyone know how to I can fix them to be the same size so the pages look cleaner.

Example:

Collections Page:

https://goldandsilverauctions.com/collections/all

Product Page:

https://goldandsilverauctions.com/products/925-sterling-silver-black-onyx-and-marcasite-post-earrings

Does anyone know how to frame it so the rows of images are the same height and width regardless of the image size? My products are pre-owned low value jewelry so the I cant crop everything the same size (the iphone doesn’t let you set the dimensions) and all the jewelry are different sizes and shapes so they have to be cropped differently.

1 Like

@goldandsilver

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

can you please confirm this do you have like this?

My page does not look like that

@goldandsilver

don’t understand my message i mean its proper look so i give you code

Yes that looks good, will it work for the product page images as well?

@goldandsilver

Yes, please give me a product look now screenshot?

https://goldandsilverauctions.com/products/925-sterling-silver-marcasite-ring-size-5-75

@goldandsilver

thanks for update

yes i will do this

Hi, I have the same issue. Here’s my website https://partpartpart.com/ and password fleimp

1 Like

@partpartpart

is this fine

@goldandsilver

can you do this?

Yes. Thanks!

@partpartpart thanks for confirming

@goldandsilver also can you please add this

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product__image-wrapper {
padding-top: 100% !important;
}
.product__image-wrapper img {
height: 100%;
    object-fit: cover;
}
2 Likes

Awesome! Thank you so much!

1 Like

@partpartpart

it’s my pleasure to help us

1 Like

@KetanKumar Hello! I am having the same issue. I tried doing what you said and it didn’t work

https://www.prettyrecklessboutique.com/

@elleandco

sorry for this issue

can you please share further issue screenshot so i will guide you

Hello,

@KetanKumar

I’m facing the same issue i’m using Debut Theme, I want all my images on the collection pages & product pages to have the same size, but they don’t, and the difference in size is more visible on the mobile versiion than desktop.

How can I fix that?

Thanks,

Michelle

1 Like

@Beytibyarabesqu

can you please share store url please

@KetanKumar sure https://beytibyarabesque.com/

thanks

1 Like