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.

[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. 

[ayellowgiraffe]

Perfect!

[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 !!!!!