Shopify themes, liquid, logos, and UX
Hello,
How do I increase products per row on mobile in Brooklyn theme to 2?
At the moment it only shows 1 product per row on mobile.
Hello, @jayboogie
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
Thank you for your reply.
My shop link is up863477.myshopify.com
Password: above
I accidentally deleted the password background jpg so you will have to move your mouse around.
If you can help with that also, that would be great!
Thanks for URL.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
div#CollectionSection { @media (max-width:767px) { .medium--one-half { width: 50%; } } }
Hi Ketan, @KetanKumar
I am wondering if you can help me here as well. I have the same concern, but I use a different theme. Here's the store's url: https://kinder-wunder.com
Yes, i can help you just let me know which section did you like the same way if possible to give me a screenshot so i will guide you
Thanks
Hi @KetanKumar
On the collection pages, for example this one https://kinder-wunder.com/collections/boys-rompers in the mobile version. Currently there's one product per row.
Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/main.css->paste below code at the bottom of the file.
@media (max-width:767px) {
#custom-products .col-sm-12 {
max-width: 50%;
}
}
@KetanKumar may I ask you if it is possible to show the tiles on the homepage also the same way? i.e. 2 in a row on the mobile?
Yes, please add this code also
Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/main.css->paste below code at the bottom of the file.
@media (max-width:767px) {
#shopify-section-1597997799069 .col-sm-6 {
width: 50%;
}
}
Hello, could you please help me? I tried this solution but it doesn’t work for me. I also need to display 2 per row.
my Shopify is shopalanoor.
thank you,
Meriem
Thanks for post
both are store is password protect can you please share us.
@KetanKumar Good day,
did you get a chance to look at my website ?
i provided you with the password.
password : iackeu
Hope to hear from you soon
Thanks for it
yes it can be done some code change it
would you be kind enough to provide me with the coding solution it would be greatly appreciated.
it takes more time and some code.
I did it and it worked but now I have two other issues.
1. Suddenly between the products there is an empty space instead of a product (attach a picture).
2. I want to create on the home page a specific collection (best sellers) of 3 products only that will be displayed in large (1 in a row) how to do it?
Hello, @VivoTalis
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
http://talis-lines.myshopify.com/
Important to know, the theme currently living on my site is Debut.
But the issues I present to you are in the Brooklyn theme (draft) that I edit in my library because I want to change my site to it.
I think this happened because on the desktop the collection it's 3 per row, so it makes this look like this on the mobile.
Am I right? how to fix it?
yes please provide the issue theme url
https://talis-lines.myshopify.com/admin/themes/82137448563/editor#/collections/all
That's the URL you mean?
You're looking at the site that's just published, but I'm talking about the new Brooklyn theme (draft) that I'm designing for my site to change it soon.
Thanks for update
yes, please provide Brooklyn theme your store url so i will guide you.
Good day @KetanKumar , i am having the same issue with the blank space on mobile after following the steps.
would you kindly help me?
store name: didysow.myshopify.com
Thank you in advance
Do you know why this happend at the mobile version? One picture leaves alone
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
thanks for it
#CollectionSection .grid-uniform {
display: flex;
flex-wrap: wrap;
}
Thanks! Appreciate it. Where to put the code?
Best regards
i think your have already add this code on CSS file right also working fine now
Hello, if anyone can help me have two products per row in the mobile version of the Brooklyn theme, that would be much appreciated.
I would like there to be two products per row on every collection page for the mobile version. I have tried to copy and paste the codes before and it works, however it leaves a gap in the grid for some reason.
Thanks!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hey @KetanKumar Thanks for the reply!
The store domain name is www.exoticremedy.co.uk
Guest password is iwiwho
Thanks
Thanks for the store URL
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 768px) {
#CollectionSection .grid__item {
width: 50%;
}
}
Hi @KetanKumar
I am using the Debut theme with Shopify and I would like to have my 3 best selling items presented in one row on my main page (on mobile!). Right now there are 2 on one row and 1 alone on the next one.
Can you please help me out? Thank you very much 🙂
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
thanks for store url, yes please add this code.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-collection .grid__item {
width: 100%;
}
}
Thanks @KetanKumar
I am not sure I did it right because now, the products are displayed one-by-one.
It might be for two reasons; I added the line of code to asset>theme.css.liquid (and not theme.css, I only found .css.liquid). Second I was not sure where to paste it so I did it on top of the file.
Do you know why that might be? Thanks for your help!
yes, please add your css file
ok, Thanks i will check and update
Hello,
Can someone please help with changing the mobile collection's display to 2 products per row?
My URL is thetechjar.com and I am using the Trademark theme.
Thanks!
Hello Ketan,
I have the same problem with the missing product in some rows.
Do you have a solution for this?
Many thanks in advance and best regards
Hi @KetanKumar,
I've tried this solution (product page) but every after each row, there's 1 empty slot..
Hello there @KetanKumar
Wish you a lovely new year,
I am using the Brooklyn theme and wanted to have my products appear 2 in a row on the mobile. I saw a code posted and I used it. as you can see below. I just noticed that not all of them appear in rows. Is this normal? Like there is an empty space. Please see the attached picture.
https://shathadafai.com/collections/all?sort_by=manual
Your help is appreciated.
Kind Regards,
Shatha
oh sorry that issue try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024