Change number of images per row in collection grid - Brooklyn

Highlighted
Tourist
6 0 3

I would like to change the number of images per row in both featured collections and collections page grid. Right now the template places three in a row, and I would like to have two or one... Did anyone have success with this? I appreciate your help, thanks!

 

 

Highlighted
Shopify Expert
156 0 6

Hi Jasmina - this should be editable within theme, liquid wise. Are you familiar with editing in that area?

Cheers!

WhiteWater Web

A certified Shopify Partner and Expert, WhiteWater Web (WWW) is a premium digital solutions company specializing in web dev/design, digital marketing, and online strategy.
0 Likes
Highlighted
Tourist
6 0 3

Nothing I tried with my very basic knowledge works. According to Shopify support, this requires advanced editing, but I was told the same for a couple of other things I wanted to change, and for which I later found very simple solutions on the forums...

Has anyone been successful at changing this?

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
9 0 4

Hi Jasmina!

The collection-grid-item.liquid snippet in the Brooklyn theme is the file you'd edit if you want to override the masonry grid feature.

When you find the snippet, look for {{ grid_item_width }} as that is what outputs the grid class ratios which change depending on the number of collections:

 

 

To override that, you can replace {{ grid_item_width }} with a specific grid class ratio. To show two per row, you'd change it to look like this: 

 

To change it to look like four per row, you'd change it to something like this:

The featured product section also follows a similar pattern:

Hope that helps!
Lisa Villeneuve

Highlighted
New Member
2 0 0

Hi Lisa,

I have the same problm, using Brklin theme, but what you wrote in your last post didn't work for me.
Can you help pls?

Thanks :)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
9 0 4

Hi Constantinescu Radu Alexandru!

Which section are you looking to edit and how many items per row? Featured collections or featured products?

Lisa Villeneuve

0 Likes
Highlighted
New Member
2 0 0

Right now, when I click to see a collection I get a page with 3 products per row, I'd like it to be 4 or 5.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
9 0 4

For the collection page, you would want to edit the product-grid-item.liquid snippet. Here's a screenshot of where I found the code to replace in my test store which affects the collection page:

You would then replace the code there with this: one-whole medium--one-half large--one-quarter

Here's a quick example I created with Chrome Dev Tools:

Hope that helps!

Lisa Villeneuve

Highlighted
Shopify Partner
3 0 1

Hi Lisa! My problem is slightly more complicated but I'm wondering if you can help me too..

I'm using the Boundless theme, but adapting certain aspects of the Brooklyn theme into it - namely the masonry collection grid where it formats a collage of 2/3 images per row. It's functioning pretty well so far, however, whenever the number of collections is divisible by 3, the first collection item decides to display as one-whole (1 per row), and is followed by a 2-per-row format. When this happens, it also seems to add height to the second box, adding to the mayhem! Here's a screenshot of this happening on the boundless theme, where the layout should be 1 row of 2, and 1 row of 3..

I would include a code snippet if I knew which! I haven't changed anything in the snippets from the Brooklyn theme, just the bare minimum to link everything together.

Thanks

 

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
9 0 4

Hi Ange!

I can see that you've found that Brooklyn differs a bit from Boundless as it uses a bit of extra css to help make the collage effect. According to the console panel in Chrome Dev Tools, it looks like the timber.scss.css stylesheet is having trouble rendering because there's a css error. This might have arrisen when you were adding in the styling for the collage effect and might be what is causing the height grid clearing issue. 

I'd recommend taking a look at the stylesheet first to make sure that it's fixed and applying correctly, then it will be easier for you to troubleshoot your grid clearing issue.

You may need to look into hiring a developer expert for help with this type of customization as it could be more complex than fixing the stylesheet. There is a job board at https://ecommerce.shopify.com/c/shopify-job-board where you can post up your requirements and designers who are looking for work can contact you.
 

Hope that helps!

Lisa Villeneuve

 

0 Likes