Brooklyn theme - Collection page image size

Per_S
Tourist
3 0 0

Hey!

I would like to change the collection page images to squares (and not have that grey background on the images). I saw that I can remove the grey background but then the image text still is where the grey background supposed to end. 

I saw this website when I was looking through the community discussion to find a solution (could not find an answer unfortunately) but this page shows how I would like my collection page to look like: https://superbarkco.com/collections/essential-oil 

This is my website collection page: https://noearlybirds.se/collections/all 

Thanks!

0 Likes
PeanutButter
Shopify Partner
330 66 137

hi @Per_S, so the height of the image container in Brooklyn theme is set to the height of the biggest image in the collection page.

In your case, the container for all images is set to the height of image of the center product of this row:

Screen Shot 2021-01-27 at 21.15.20.png

You have 2 options:

1- Upload a square image for each product.
2- Add custom code which crops the center part of all the images of they are different proportion (not square)

If option 2 is what you want, let me know and I will send you solution

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Per_S
Tourist
3 0 0

Thanks for your answer!

I am at the moment cropping all images to squares and upload (then I have control over how the image will be cropped)

So it will automatically change when all images are uploaded as squares?

0 Likes
PeanutButter
Shopify Partner
330 66 137

Yes, that is correct. For each page, if all images are square, you will get the desired effect.

If you finally get the desired result thanks to my answer, please remember Liking and Accepting my answer

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Per_S
Tourist
3 0 0

Perfect! Thats a lot of help for me!

0 Likes