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

Store Design

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.
1

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
2

@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?

Products – Gold and Silver Auctions.png
Products – Gold and Silver Auctions.png1522×2601 434 KB

3

My page does not look like that

goldandsilver_0-1616720210576.png
goldandsilver_0-1616720210576.png1031×846 312 KB

4

@goldandsilver

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

5

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

6

@goldandsilver

Yes, please give me a product look now screenshot?

7

goldandsilver_0-1616880045024.png
goldandsilver_0-1616880045024.png1238×878 150 KB

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

8

@goldandsilver

thanks for update

yes i will do this

9

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

1 Like
10

@partpartpart

KetanKumar_0-1617079665210.png
KetanKumar_0-1617079665210.png1920×1080 319 KB

is this fine

@goldandsilver

can you do this?

11

Yes. Thanks!

12

@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
13

Awesome! Thank you so much!

1 Like
14

@partpartpart

it’s my pleasure to help us

1 Like
15

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

16

https://www.prettyrecklessboutique.com/

17

@elleandco

sorry for this issue

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

18

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
19

@Beytibyarabesqu

can you please share store url please

20

@KetanKumar sure https://beytibyarabesque.com/

thanks

1 Like