Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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!
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 !
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!
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?
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'
2. The theme has the price of the product next to the product name like the image below
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!
Hi
please share your shop url and password .
Thanks!
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.
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 !
Thank you.
That worked.
And the other two questions?
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?
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!
How would you change it so it has 2 pictures per row on the phone ?
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
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.
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
Hi! can you please help me. I was trying to do it but I can't the code😫
Can't find the code
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
solved
How do you do this for phone?
how did you solve?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024