Collection grid 3 columns all same size

Lucas24
Excursionist
14 0 7

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
Ninthony
Shopify Partner
1634 224 612

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 my solution helped you, please like and accept as solution!
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
KarlOffenberger
Shopify Partner
1867 182 777

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Lucas24
Excursionist
14 0 7

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
KarlOffenberger
Shopify Partner
1867 182 777

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
Lucas24
Excursionist
14 0 7

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

0 Likes
cfar
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
davidinottawa99
New Member
1 0 0

@KarlOffenberger 

THANK YOU!

I never even know this configuration existed. I had already edited the mark up to match a 3 column grid! Lol 

0 Likes