Make all product inages same size

Store Design
, , , , , , , , , ,

Topic summary

A Shopify store owner is experiencing inconsistent product image sizes on their collection page, with some images appearing significantly smaller than others after importing products from different sources.

Root Cause Identified:

  • The issue stems from varying amounts of white space/padding around product images in the source files
  • Two example product images show one has minimal white space while another has excessive surrounding space
  • This creates visual size inconsistencies when displayed in the grid layout

Proposed Solutions:

  1. Manual Image Editing (recommended by one contributor):

    • Edit images directly in Shopify’s file content area
    • Crop/resize to remove excess white space around products
    • Note: CSS alone cannot solve this underlying image quality issue

  2. CSS Approach (alternative suggestion):

    • Add object-fit: cover with fixed dimensions and aspect-ratio: 1/1 to product card images
    • Edit theme code in sections/collection-product-grid.liquid

Current Status:
The store owner rejected the CSS solution, noting it would crop larger images. They’re seeking a method to selectively enlarge only the smaller images while preserving larger ones intact. The discussion remains open without a final resolution.

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

Hi,

I have two different imports and some new product images on collection page are very small. Example https://vazluxe.com/collections/new-in?page=5

EDD3CB30-DF69-4344-A4C5-2FFC9498769D.png
EDD3CB30-DF69-4344-A4C5-2FFC9498769D.png1170×2532 195 KB

small above and want to all be this size below

C15AD940-F73A-4865-A9C1-6AAECAA2609F.png
C15AD940-F73A-4865-A9C1-6AAECAA2609F.png1170×2532 248 KB

Is there a code I can set so they all look the same?

2

@Luxurymrkt

If you checky our this two image
https://vazluxe.com/cdn/shop/files/6164079.jpg?v=1745290040&width=360
https://vazluxe.com/cdn/shop/files/6164076.jpg?v=1745290039&width=360
one image has less white space around it and other image has much. The only way to remove the white space of those image which has much.
From shopify files content area you can resize the image and remove serounding white space like this

Arif_Shopidevs_0-1745291967041.png
Arif_Shopidevs_0-1745291967041.png1804×1103 211 KB

Hope it will solve your issue. By HTML CSS code this is not possible to solve.

3

Hi @Luxurymrkt , The issue you’re facing is caused by one or more of the following:

Inconsistent Image Dimensions
Missing or Low-Resolution Featured Image
Theme Settings Not Enforcing Consistent Size

Here are steps to resolve this –

Go to Online Store > Themes > Actions > Edit code

Open sections/collection-product-grid.liquid or similar file

Look for the img tag and ensure it has proper object-fit: cover and fixed height/width styles.

Add this CSS

.product-card__image img {
object-fit: cover;
height: 100%;
width: 100%;
aspect-ratio: 1/1; /* for consistent square layout */
}

4

Thank you but this won’t work because the images that are big will get cut off. Is there a way to just increase any image that’s smaller?