My Shopify collection grid looks uneven because product images have different shapes. How do I make them consistent?

Pick one size for every image, for example 2000 by 2000, and convert each photo with 'Fit inside' and the same background color, so every tile in the grid matches. The resizer takes one image at a time, but the fit mode, color and format stay as you set them between photos, so you only re-pick the size for each one.

Published · 3 min read

Why the rows jump

Many themes show a product image at its own ratio. If the shirt photo is portrait, the bag photo landscape and the watch photo square, each card takes a different height, and prices and buy buttons drift off a common line. Some themes have a setting that forces one ratio and crops images automatically, so check your theme first. If there is none, or you do not want arbitrary cropping, make the files themselves consistent.

What happens to each shape

Worked example

A 1500 × 2000 portrait photo inside 2000 × 2000 with 'Fit inside': it keeps its size and sits 250 px from the left, with a 250 px band on each side.

A 4032 × 3024 landscape phone photo: scaled to 2000 × 1500 and placed 250 px from the top.

A 2000 × 2000 square photo: unchanged, with no bands.

The result is three images of exactly the same size, each product shown whole. If the backdrops were white, shoppers will not even see the bands.

Fit or crop?

If every product sits in the middle of its photo with empty backdrop around it, 'Fill and crop' gives bigger products in the tiles: a 3000 × 2000 photo, for example, keeps a centered 2000 × 2000 square starting at pixel 500. What matters is choosing one mode for the whole store, because mixing the two brings the inconsistency back in another form.

A practical routine for dozens of photos

  1. Open the Image resizer, choose the first photo, and pick 'Marketplace listing' from the common sizes, or type the size you settled on.
  2. Set the fit mode, background color, format and quality once.
  3. Download, then choose the next photo. The width and height reset to the new photo's own size and the ratio lock comes back on, so re-pick the size only; the mode, color and format stay.
  4. Repeat until done, and upload the files to Shopify in place of the old images.
  5. If the files are heavy, run them together through the Image compressor, which accepts several images at once.

Common questions

Is 2000 × 2000 a size Shopify requires?

We do not claim that. It is simply one of the tool's common starting sizes. Check the current recommendations from Shopify and your theme, and type the size that suits you.

Can I convert all the photos in one go?

No, the resizer handles one image at a time. The settings carry over between photos, though, so the work goes quickly.