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. 

Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4461 574 1119

This is an 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' %}
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

View solution in original post

Replies 37 (37)
Jasoliya
Shopify Expert
4461 574 1119

This is an 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' %}
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
WinstonT
New Member
8 0 0

Thank-you Jasoliya!

 

Worked like a charm!

Leeha
Tourist
15 0 1

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
Shopify Expert
4461 574 1119

send your store url

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
Leeha
Tourist
15 0 1
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
Shopify Expert
4461 574 1119

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.
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
Leeha
Tourist
15 0 1
Hi Jasoliya

I think you forgot to join your image. So can't follow your explications.
Jasoliya
Shopify Expert
4461 574 1119

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

collections.png

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
Leeha
Tourist
15 0 1
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
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
4461 574 1119

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
20 0 24
VictoriaGuillem
New Member
4 0 0

i have this problem too !!! please help me

Jasoliya
Shopify Expert
4461 574 1119

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
4461 574 1119

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
4461 574 1119

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