Solved

How do I add more products per row on my Brooklyn theme? And remove sold out tag on product picture

jayboogie
Explorer
58 0 13

How do I add more products per row on my Brooklyn theme? 

 

Right now I am limited to 3 products per row and would like 4

 

And how do I remove the attached sold out tag from my product pictures?

I want to remove this tag from my sold out items. I just want it to say sold out where the price is (much neater)I want to remove this tag from my sold out items. I just want it to say sold out where the price is (much neater)

 

Accepted Solutions (2)

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey there,

 

You can set this up in the Sections / collection-template.liquid file of the Sections folder.

On Line 136 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  products per row .

 

Solution for remove sold out 

 

add code assets/theme.scss.liquid bottom of the file

 

.grid-product__sold-out {display: none;}

Hope this css code work for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

hi 

 

But in regards to removing the sold out tag, there is two theme.scss.liquid under assets, do I put it under the first one or the second?

 

you put css  code theme.scss.liquid file

 

Thanks !

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 18 (18)

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

Hey there,

 

You can set this up in the Sections / collection-template.liquid file of the Sections folder.

On Line 136 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  products per row .

 

Solution for remove sold out 

 

add code assets/theme.scss.liquid bottom of the file

 

.grid-product__sold-out {display: none;}

Hope this css code work for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jayboogie
Explorer
58 0 13

Thank you.

 

The solution for the grid style worked.

 

But in regards to removing the sold out tag, there is two theme.scss.liquid under assets, do I put it under the first one or the second? 

 

theme.PNG

 

Also, 2 other questions

 

1. Is there any other way of labeling that a product is sold out? For example, replacing the price for text 'SOLD OUT' 

 

price 2.PNG

 

2. The theme has the price of the product next to the product name like the image below

price 3.PNG

Is it possible to remove the dash and have the price tag/sold out under the product name like the image in question 1?

 

Hope you can help!

 

dmwwebartisan
Shopify Partner
12280 2546 3694

Hi

please share your shop url and password .

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jayboogie
Explorer
58 0 13

Hi again,

 

up863477.myshopify.com

password is above

 

I accidentally deleted the background image file for the password page so you will have to move your mouse around. 

dmwwebartisan
Shopify Partner
12280 2546 3694

This is an accepted solution.

hi 

 

But in regards to removing the sold out tag, there is two theme.scss.liquid under assets, do I put it under the first one or the second?

 

you put css  code theme.scss.liquid file

 

Thanks !

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jayboogie
Explorer
58 0 13

Thank you.

 

That worked.

 

And the other two questions? 

 

  1. Is there any other way of labeling that a product is sold out? For example, replacing the price for text 'SOLD OUT' 
  2. Is it possible to remove the dash before the product price and have the price under the product name like the image in question 1?price 2.PNGprice 3.PNG
Enzepro
Tourist
4 0 1

Hi I change to one-fifth and it can show 5 products per row, but the products bottom prices are not align now, how to solve this problem?

loxandfox
New Member
4 0 0

I'm having troubles with the products per row in my Brooklyn theme.  Sometimes the last row shows only 1 or 2 products and makes it look like it's the end yet there are 4 other pages filled with products.  Is there a way to make sure that the last row on each page is filled with product ?  Thanks! 

Vinajah123
Tourist
5 0 1

How would you change it so it has 2 pictures per row on the phone ?

Panagiotis71
Visitor
2 0 0

I would like to know how we add more rows on Brooklyn theme. I want when someone click on products ( I have 1200) to see many rows with my products because now I only have 4 rows with 3 products but i need more rows. 

Thank you

Panagiotis71
Visitor
2 0 0

You have said

You can set this up in the Sections / collection-template.liquid file of the Sections folder.

On Line 136 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.

There is no 136 line in order to see thta you describe...maybe changed a lot BUT I still want to add more rows not only to collection but also in products, I mean when I click on products now I have 4 rows with 3 products in each row I would like to have many rows with 4 products in each row.

artifulboutique
Excursionist
37 0 9

I have a similar demand. In my Featured Collection Section (Home Page), I don't want to show every single one product. Is there any way to show a certain amount and then put a ''more products'' button?

 

My store adress: www.artifulboutique.com

brigitteb
New Member
4 0 0

Hi! can you please help me. I was trying to do it but I can't the code😫

brigitteb
New Member
4 0 0

Can't find the code

malisawi
Visitor
3 0 0

Hey, for the adding products per row, it works on my pc but on my phone still shows only 1 product at a time, is there any way i can change this? 

Snkrs360.com

malisawi
Visitor
3 0 0

solved

JamesMoore01
Visitor
1 0 0

How do you do this for phone?

slayerex
Visitor
2 0 0

how did you solve?