How to change the product image size in the collection page in the Brooklyn theme

[nc1345]

Hello!

I spent hours just trying to figure this out and couldn't find anything that helped. 

The product image size is too small. I'm looking to make all product images bigger when I'm shopping.

This is what it currently looks like:

I want it to look like the image below. It's hard to tell but basically, the images reach the entire screen (little margins on the left & right and the images are also larger).

How do I enlarge the image (and reduce the margins I'm guessing)? I already know how to change the number of products per row in a grid, so that isn't a problem. The problem is that the product images are too tiny. Any pointers to the right files and specific sections to edit would be appreciated.

Also please note I'm using the BROOKLYN theme.

[KetanKumar]

Hello, @nc1345 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[nc1345]

Hi @KetanKumar and @diego_ezfy 

Thank you for your help.

The URL is emri-studio.com (or emri-studio.myshopify.com) and password is: twieck

I'm probably going to use vertical images (as opposed to my horizontal ones right now).. So hopefully any fix will take this into account. I believe the first image in my product page right now is kind of what I had in mind. 

[KetanKumar]

@nc1345 

Thanks for details 

yes i have check this how fo you like collection product image let me know so i will guide you.

@stephaniepoe20 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[stephaniepoe20]

Yes I still need help with this. Can you provide me with the code edits? I'm using the brooklyn theme. My url is 

www.colourtheorycollective.com

[KetanKumar]

@stephaniepoe20 

Thanks
can you please share screenshot further issue

[Muessigmanns]

I have the same issue. The shop add is www.muessigmanns.eu ; I would like to have the pictures bigger than they are currently when a user scrolls through the collection. Unfortunately I can not find any solution to the problem from this conversation. Can someone enlighten me? Appreciate.

Benjamin 

[KetanKumar]

@Muessigmanns 

Thanks for post 

sorry for your store is password protected can you please share us.

[Muessigmanns]

Hi @KetanKumar ; thanks for your quick reply. 

www.muessigmanns.eu ; pass is: skeanu

Currently I have 3 products in one row and the size looks ok but when I switch to 5 Products per row then images get way too small. What I would like to have is bigger image sizes in the collections when having 5 products in a row. 

Appreciate your help.

Benjamin 

[KetanKumar]

@Muessigmanns 

Thanks 

can you add me staff account so i will used theme dynamic code and quick fix

[franklovesdoll]

HI, I would also be very keen to make my product grid wider & less spacing between images particuarly in mobile please - so basically the images are larger when you are browsing through a collection. This help would be amazing thank you!! The site is https://frankanddoll.com

Many thanks

Ben

[annborder]

Hello - 

I am having this same issue. I would like my images to be larger in a 2:3 vertical proportion on my collection page. They look fine on mobile but much too small on PC. I would also like the sort by bar moved to be on the same level as the tag links. is this possible? The first image is a ss of how it looks now, and the second img is how I'd like it to look. 

https://kate-beck-new-orleans.myshopify.com/ pw desmond7

[diego_ezfy]

Hello,

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

[stephaniepoe20]

I am having the same issue on my site. Did youu ever come up with a solution?

[adwardlince]

change apperance setting in to dashboard  

[sophiagarcia]

In this way change the product image size in the collection page in the Brooklyn theme.

1. Click Resize.
2. Enter the new width for the image. The height is automatically updated to keep the same aspect ratio. If you want to resize the image without keeping the same aspect ratio, then click Lock aspect ratio. 
3. Click Apply to resize the image.
4. Click Save. You're done making edits in the image edit.

Hope you got your answer!

[annborder]

curious to know where you are finding these settings.. I am looking under the collection pages section and there is nothing about resizing images. Can you supply a screen grab of what you are looking at?

Thanks! 

[MaisonRoca]

Did you ever find a solution to this? I can’t find the option to resize also. 

[KetanKumar]

@MaisonRoca  oh sorry for facing this issue can you please share your store url so i will check and update your soon as possible 

[MaisonRoca]

Thank you it’s www.maisonroca.com

[KetanKumar]

@MaisonRoca thanks for URL sorry but i can't see product gird view can you please show me 

[MaisonRoca]

This is what it looks like on  the mobile app, the pictures are cut off as rectangle shape? I’d like them to appear square if possible.

[KetanKumar]

@MaisonRoca yes look as product 

@MaisonRoca yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (max-width: 600px) {
#shopify-section-featured-collections .collection-grid .grid__item {
height: 400px;
}
}

[MaisonRoca]

Great thank you so much I will try this, 🙏🏼

[KetanKumar]

@MaisonRoca thanks for update.

[MaisonRoca]

Thank you this worked great!

Is there a way to do the same on the desktop version, it would be great if the pictures are full square, I only have 5 catagories at the moment, so not sure if possible without making a equal number.

[KetanKumar]

@MaisonRoca yes sure i will share new but can  you please confirm  this look!

[MaisonRoca]

Yes that looks great, also on the mobile app when I click shop now again the collections are displayed with rectangle rather tham square images so looks off, can we do something about this also? Thank you really appreciate all your help!

[KetanKumar]

@MaisonRoca thanks for confirm yes we can do custom  theme  option you will eady to choose image size  desktop and mobile for more customization code

[MaisonRoca]

ok thank you how do I implement these changes?

[KetanKumar]

@MaisonRoca yes please shar particular page URL for this so i will guide your

[MaisonRoca]

It is on the mobile version and the URL is https://maisonroca.com/collections

would love for the collection pictures to be squared not rectangle.  

Also when I click on the individual collections the picture size is not consistant, some have more filler than others is there a way to fix this so the pictures all show the same size.

[KetanKumar]

@MaisonRoca oh sorry for any issue if still any issue let me know, i have checked its working fine