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.