How To Make All The Product Images The Same Size

Technical Q&A
,

Topic summary

Goal: standardize product image dimensions across Shopify product listings.

  • Original poster can’t find theme.scss.css in Assets (screenshots provided). A CSS-based fix was suggested: add rules in component-product-listing.css to force a fixed image height (300px) and a square aspect ratio for cards.

  • Another suggestion: use the Theme Editor path Online Store > Themes > Customize > Theme settings > Setup for Product Card to enable same-size images. (“Product Card” refers to the product tile; CSS refers to the stylesheet controlling appearance.)

  • Follow-ups: several users report they cannot find component-product-listing.css or the “Product Card” option in their themes. Mentioned themes with issues include Impulse and Dawn, indicating differences across third‑party themes.

  • One Dawn user added code in multiple places without effect and now sees squiggly warnings in theme.liquid, fearing they introduced errors.

Status: unresolved. Key open points are where to apply CSS or which setting to use in specific themes; theme-specific guidance or support may be required.

Summarized with AI on December 18. AI used: gpt-5.
1

I want to make all my product images the same size to look better online. I already tried to look at this: https://community.shopify.com/post/1779017 but i do not havetheme.scss.css in my Assets.

Screenshot 2024-02-19 02-00-35.png
Screenshot 2024-02-19 02-00-35.png1920Ă—1080 201 KB

Screenshot 2024-02-19 01-57-10.png
Screenshot 2024-02-19 01-57-10.png1920Ă—1080 261 KB

2

Hi @Empirewaredrobe
To show all images on same size put below CSS to component-product-listing.css

.halo-collection-content .productListing .card-media img {
    height: 300px;
}

.halo-collection-content .productListing .card-media{
	padding-bottom: 100% !important;		
}
1 Like
3

Hi @Empirewaredrobe

You can go to Online Store > Themes > Customize > Theme settings > Set up for Product Card > check if it has the option to change all product image same size.

2 Likes
4

Where do I find component-product-listing.css??

I looked over on the theme code and it didn’t exist, nor did I find the option to maintain same image size for products as suggested by the other user who replied to this thread.

5

I can’t find that. Any other way?

6

There is no “product cart” in my theme settings.

I’m using impulse theme

7

Hi,

I’m having the same issue that I’m trying to get all my photos to be the same size. I added the code to several spots but it is still not fixing the problem. I have the theme Dawn. And now the theme.liquid page has a whole lot of squiggle lines in the code. I’m scared I might have messed it up.