Collection grid 3 columns all same size

Excursionist
14 0 5

Hi, I've been looking online a lot but couldn't find a clear guide.
I just want to make a 3 column grid, with pictures of all the same size for my collections page.

What section am I supposed to modify to do so and what lines with what code please ?

Thanks

0 Likes
Astronaut
1091 150 274

You won't find a clear guide because everyone's store is generally different, so there isn't a catch all of "this is how you make a 3 column grid". The file you're going to want to edit is "collection.liquid" in your templates folder, that's really all I can tell you. I can get your products into a 3 column grid, but it looks like your images are all different dimensions which causes the height of the containers to be different and the prices to display at different heights as well. If you want your images to be the same size you're going to have to commit to a specific set of dimensions. It'll probably take a redesign to achieve what you need.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
1838 173 601

Hi Lucas,

In addition to what Ninthony wrote, I might add that since you're using Brooklyn theme, you have the option to change your collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Excursionist
14 0 5

Hi and thanks for your fat replies guys !

@Ninthony
I will eventually make all the images the same size if that can help.
What sort of coding lines should I put in the collection.liquid to achieve what I need ?

@Karl Offenberger
I really can't find this "grid" option for Brooklyn, I really think I've looked everywhere, could you give me a clue where I can find this option ?

0 Likes
Shopify Partner
1838 173 601

In your admin, navigate to Online Store > Themes > Customize. Once in the customizer, the top bar, to the right of the Shopify logo contains a drop down which defaults to Home page. Select Collection pages instead and then in the right panel you should see 3 sections: Header, Collections pages and Footer. Select the Collection pages section. Now you will have a select box for Grid style where you can change it from Collage to Grid.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
Excursionist
14 0 5

@Karl Offenberger : Perfect that's exactly what I needed ! 

0 Likes
New Member
2 0 0

Hello Sir, this part of your reply: collection pages > collection pages section to be grid based styles instead of collage. That is set to 3 columns on desktop view, 2 tablet and 1 mobile.

Is there any way to set the columns so that in mobile, we can increase it from 1 to 2?

0 Likes