Change mobile product view for Brooklyn Theme

Solved
WinstonT
New Member
8 0 0

Hello,

 

New to the shoplift forum. 

 

I'm currently using the Brooklyn theme - I like the overall feel however, I do not particularly find that the mobile version is optimized for mobile viewing experience. I do however, really like how the Debut theme has setup their mobile side to view products (see below):

 

Screen Shot 2019-06-21 at 12.08.15 AM.png

The mobile view for products in the Debut theme is very simple but effective I find. In the Brooklyn theme, in the mobile side it displays the products in a "stacked" view and I find it's not very pleasant. You'd have to scroll all the way down to view every item. 

 

Can anyone please help/advise on how I can code the Debut theme style for product display in the mobile viewing into the Brooklyn theme for mobile? I did go through several of the other posts in the community but was not able to find a solution for my problem.

 

Please let me know if there are any questions or concerns with my inquiry. 

Replies 29 (29)
Yamby
Tourist
14 0 1
If I understand correctly this makes you have two products display on the mobile view so you don’t have to scroll down single products? I couldn’t find it in mine, I also use the Brooklyn theme. Please advice.
Jasoliya
Shopify Expert
4382 574 1103

As i can see you have 2 grid don mobile already. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
ayellowgiraffe
Excursionist
17 0 19
VictoriaGuillem
New Member
4 0 0

i have this problem too !!! please help me

Jasoliya
Shopify Expert
4382 574 1103

Hi @VictoriaGuillem 

Send your store url.

Best regard 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
VictoriaGuillem
New Member
4 0 0

24723F62-2955-47A9-88BD-1D8917AD9EAD.png

www.oholybijoux.com 

 

thanks .

 

the problem is on the deskop in my collection page I have 2 grids of images but on the mobile version I only have 1 ... yet on the "product recommendation" page it shows me 2 products in small size and this this is how i want

0AEB620F-8518-44F9-AF22-FA237B6C0905.png

 

Jasoliya
Shopify Expert
4382 574 1103

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 576px) {
    .grid-uniform .grid-product {width:50%;}
    .grid-uniform .grid-product:nth-child(2n+1) {clear: both;} 
}

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
VictoriaGuillem
New Member
4 0 0

its dosent work.... im so sad ...

Jasoliya
Shopify Expert
4382 574 1103

I cant see may give code you have added ?

You have timber.scss file so add in this file

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
VictoriaGuillem
New Member
4 0 0

thanks you are amazing !!!!!!!!! its work !!!! thanks very much !!!!!!!! you made my day you are my savior !!!!!