Number of items on a row with grid display (Brooklyn theme)

Highlighted
Tourist
24 0 1

Hello,

I instaled the "brooklyn" them on my shopify store. I choosed to display my products on the home page in grid but I can only have 3 items on a row. I would like to put 4 at least to balance the placement and to avoid line break in my product.

Does somebody how which file I need to edit?

Thanks a lot :)

0 Likes
Highlighted
Shopify Staff
Shopify Staff
97 0 23

Hey Kertone,

David here, Shopify Guru!

You can set this up in the featured-products.liquid file of the Sections folder.

On Line 50 you will notice this code: {% assign grid_item_width = 'medium--one-half large--one-third' %} and this determines the amount of featured products that will display in a line when using the grid style display.

The "large--one-third" here means that on a large display the grid will be broken into 3 parts and that is why it is showing 3 products. Therefore, in order to show 4 products you can change this to "large--one-quarter" or for 5 products it would be "large--one-fifth" and so on.

I hope that clears things up so you can now edit this code to display the 4 featured products per row :)

Feel free to drop us a line at support@shopify.com if you have any other questions!

David Mc | Shopify Guru

2 Likes
Highlighted
Tourist
24 0 1

Yes perfect!

Thank you David :)

 

0 Likes
Highlighted
New Member
3 0 0

Hello,

I am also working with the Brooklyn theme. 

From the HOMEPAGE, when viewing products in my FEATURED COLLECTION in a veritical position on my cellular device (iphone) they appear in one row, one collumn. When viewing products in the horizonal postion they appear as I want them after entering the code above - three rows, three collumns.

(Note: 'medium--one-half = cellular view , large--one-third' = laptop view , is this correct?)

When I changed 'medium--one-half to 'medium--one-third it worked! BUT only when viewing broducts horizontally.

How do I get my vertical view to look like my horizontal view??

PLEASE someone help me with this! THANX!

 

W E S T COAST W O O F co.

dog leads, apparel & accessories

WestCoastWoofco@gmail.com

shopwestcoastwoof.com

Instagram: @westcoastwoof

 

30% OFF Memorial Day sale TODAY ONLY (CODE: WOOFsalute)

 

Pawsitive West Coast Vibes
0 Likes
Highlighted
Excursionist
17 0 4

Hey West Coast Wolf,

Try adding this class to the grid item:

small--one-whole

This will make the items 100% width until 480px. You can read more about it here: 2.2 Breakpoints

Good luck!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
97 0 23

Hey Folks,

Just an update that the site that Pierre kindly recommended is no longer active so for more information on the grid layout you can check our updated Slate documentation.

All the best,

David Mc

0 Likes
Highlighted
New Member
1 0 0

I have applied the changes as per your recommendations, saved everything, empty cache, hard refreshed my website and still nothing. It shows 3 instead of 5. Please advise.

0 Likes
Highlighted
New Member
9 0 0

Hello how can i customize  quantity of files to show in featured collection in brooklyn theme?

Thanks, Diego.

0 Likes