Change mobile product view for Brooklyn Theme

Solved
Highlighted
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. 

0 Likes
Highlighted

Success.

Shopify Expert
2761 480 619

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' %}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
New Member
8 0 0

Thank-you Jasoliya!

 

Worked like a charm!

0 Likes
Highlighted
New Member
6 0 0

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

0 Likes
Highlighted
Shopify Expert
2761 480 619

send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
6 0 0
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:} }*
0 Likes
Highlighted
Shopify Expert
2761 480 619

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)

collections.png

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0
Hi Jasoliya

I think you forgot to join your image. So can't follow your explications.
0 Likes
Highlighted
Shopify Expert
2761 480 619

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

collections.png

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
6 0 0
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.
0 Likes