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

Replies 12 (12)
Ninthony
Shopify Partner
2247 339 900

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 it and accept it as the 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
KarlOffenberger
Shopify Partner
1866 184 836

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, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
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 ?

KarlOffenberger
Shopify Partner
1866 184 836

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, Last Upsell post-purchase 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 ! 

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?

davidinottawa99
Tourist
3 0 1

@KarlOffenberger 

THANK YOU!

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

ready_golfer
Excursionist
20 1 6

@davidinottawa99 

I was thrilled to see your response. Please advise how I can change the code to result in a 3 column grid on tablets.

davidinottawa99
Tourist
3 0 1

As described here:

https://community.shopify.com/c/shopify-design/collection-grid-3-columns-all-same-size/m-p/452770/hi...

there isn't one single solution bc it depends on your theme, templates and existing CSS.

You would need to provide the theme name you are using, or better a URL to your site. 

The overall concept is straight-forward:

https://www.w3schools.com/howto/howto_css_three_columns.asp

https://www.tutorialspoint.com/how-to-create-a-3-column-layout-grid-with-css