How to make collection images fixed to make them always the same size?

[kbeautyblossom]

Some of my collections have only two products but the images are double size when my collection is less than 3 and 4. 

When it has less than 3, the image is 50% and when 2, 33.33%. 

Please check my collection pages when it has 2, 3, and more than 4. 

https://www.kbeautyblossom.com/collections/hera

https://www.kbeautyblossom.com/collections/innisfree

https://www.kbeautyblossom.com/collections/sulwhasoo

[HamishDavisonIC]

@kbeautyblossom 

How to fix collection images not always being the same on Dawn theme — Shopify 2.0 tutorials

Please read all my articles as they will also explain how to actually get into Shopify theme development and allow you to customize stores

Let’s get into it, firstly the problem:

The images are blurry because there are only 2 products in the collection

This sucks! Because your high quality images may affect conversion rate

Although this is only on desktop — It’s understandably a problem that people want to resolve

So how can we fix it?

As we highlight the problem code, we can see the images are also highlighted

Now go into your Shopify 2.0 backend and search for “grid”

Do not change anything in this file but this is how we find out what step is next

component-product-grid.css — copy this into your shopify backend search

Open this file

Play with these numbers until satisfied

Thanks

Hamish!

Income stream surfers on youtube

Please accept as a solution if this solves it for you 🙂

[kbeautyblossom]

Super! 

I'll try and let you know! Thanks a lot!! 

[kbeautyblossom]

Dear Hamish, 

Brilliant! 

Thank you so much for your help! It works great now! 

[Mizzely]

Thank you for this !! It totally fixed the GIGANTIC images I had for one of my collections!