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

Solved
Highlighted
Explorer
58 0 11

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)

 

1 Like
Highlighted
Shopify Partner
3179 700 846

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
2 Likes
Highlighted
Explorer
58 0 11

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!

 

0 Likes
Highlighted
Shopify Partner
3179 700 846

Hi

please share your shop url and password .

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Explorer
58 0 11

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. 

0 Likes
Highlighted
Shopify Partner
3179 700 846

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Explorer
58 0 11

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
0 Likes
Highlighted
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?

0 Likes
Highlighted
New Member
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

0 Likes
Highlighted
New Member
3 0 0

solved

0 Likes