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

kbeautyblossom
Excursionist
27 0 8

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

 

Replies 4 (4)
HamishDavisonIC
Explorer
52 6 40

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

 

HamishDavisonIC_0-1632177522666.png

 

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?

HamishDavisonIC_1-1632177522851.png

 

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”

HamishDavisonIC_2-1632177522667.png

 

Do not change anything in this file but this is how we find out what step is next HamishDavisonIC_3-1632177522858.png

 

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

HamishDavisonIC_4-1632177522607.png

 

Open this file

HamishDavisonIC_5-1632177522836.png

 

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
Excursionist
27 0 8

Super! 

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

kbeautyblossom
Excursionist
27 0 8

 

Dear Hamish, 

 

Brilliant! 

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

 

 

Mizzely
Tourist
7 0 1

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