Change mobile product view for Brooklyn Theme

[WinstonT]

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):

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. 

[Jasoliya · Accepted solution]

Follow this:

1. Go to Online Store->Theme->Edit code
2. Snippet-> collection-template.liquid -> find grid_item_width and add this small--one-half so it look like bellow:

{% assign grid_item_width = 'medium--one-half large--one-third small--one-half' %}

[WinstonT]

Thank-you Jasoliya!

Worked like a charm!

[Leeha]

Hi I have the same problem with my brooklyn theme, and the solution didn't work for my store on mobile. Another solution maybe?

[Jasoliya]

send your store url

[Leeha]

Hi Jasoliya,

My URL site : https://www.natureetbambou.com/collections/decoration-bambou
I think we already worked together on my shop for this problem. And the
first solution you gave me didn't work.

I would like to keep the current products view on desktop, but have the
debut theme mobile side to view products like (see below):

[image: image.png]

Your first solution was : >> Add this css in *Asset->theme.scss* file at
bottom
*@media only screen and (max-width: 767px) { #CollectionSection
.grid-uniform .grid__item{width:} }*

[Jasoliya]

HI @Leeha 

If you want to show grid view of product listing then you can do this:

1. Go to theme editor->collection page->select grid from "Grid style" (See image)

[Leeha]

Hi Jasoliya

I think you forgot to join your image. So can't follow your explications.

[Jasoliya]

I can see image amy be at your side cant load proper.

[Leeha]

Ohhh ok ok now I can see.

This solution didn't works. When I switch to "Grid", only the desktop view
change not the mobile version.

[Jasoliya]

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

@media only screen and (max-width: 767px) {

#CollectionSection .grid-uniform .grid__item{width: 50% !important;}

}

[Tadiwanashe]

Hey can i get help for the same thing? i already tried pasting those codes. Please help! i would appreciate it my store is 

www.afroodrip.com

i am trying to put products 2x2 grid (side by side). 

[Yamby]

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]

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

[VictoriaGuillem]

i have this problem too !!! please help me

[Jasoliya]

Hi @VictoriaGuillem 

Send your store url.

Best regard 

[VictoriaGuillem]

 

 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

[Jasoliya]

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;} 
}

[VictoriaGuillem]

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

[Jasoliya]

I cant see may give code you have added ?

You have timber.scss file so add in this file

[VictoriaGuillem]

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

[humanity]

This didn't work for me 😞 could you please help me??

[ayellowgiraffe]

Perfect!

[malk]

Can you please help me out? I really want to show more than one product at a time on mobile. My website is www.shopmalk.com. Thank you! 

[Jasoliya]

Hi @malk 

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: 767px) {
.grid-uniform .grid__item.grid-product{    width: 50%;}        
    }

[malk]

Thank you so much!! That did work but now I get random blank spaces next to some items. I’m attaching a screen shot. Can you please take a look? Thank you!!

[malk]

Thank you so very much! Can you please let me know how to get rid of random blank spaces that I get next to some products? 

[Jasoliya]

Add this code:

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

[malk]

Awesome, that worked! Thank you so so much!!! 

[THCLLC]

@Jasoliya Hello, I have the minimal theme and I'm also just trying to have the featured products on a grid view instead of stacked. On desktop its grid view but changes to stacked on mobile can you help my URL is thehustlersculture.com

[Jasoliya]

I can see you have already grid view on home page for feature product section.

Best regard 

[THCLLC]

Yea I just kept trying different sequences and finally got it right.

[Adam_McLoughlin]

@Jasoliya This worked great for my product page on mobile!!

I was wondering if there was a similar code update that could be done in order to also make the 'frontpage' collection images half size on mobile? Currently my Popular Products collection which is featured on the homepage, still has full size images on mobile so only one product per width of the screen.

Thanks!

[Jasoliya]

send me store url

[Adam_McLoughlin]

www.ironstrongapparel.com

thanks!

[Adam_McLoughlin]

@Jasoliya any luck? Thanks!

[Jasoliya]

so you want to make 2 product per row in mobile for feature collection section ?

[Adam_McLoughlin]

Yeah that’s correct…if possible? I have 6 products in the ‘popular products’ section and thought it may look better on mobile if there were 2 side by side rather than currently it’s a large single product that you have to scroll down through. 
if not possible, no worries!