Brooklyn Theme Featured Product Layout

Solved
Tylermcs
Tourist
6 0 3
Hi, I am currently building up a website with Brooklyn theme. The default setting on the Brooklyn theme’s featured product page (Mobile view) are displaying item in single column, is there any way that I can make the layout to display in two columns in mobile view?

Thank you!
0 Likes
Ninthony
Shopify Partner
1898 285 745

Go into Online Store > Actions > Edit Code on your theme and open "featured-products.liquid" in your sections folder. Scroll to this line:

 

          {% assign grid_item_width = 'medium--one-half large--one-third' %}
          {% for product in collections[section.settings.home_featured_products].products %}
            {% include 'product-grid-item' %}
          {% endfor %}

It's about line 50, you want to add small--one-half to the grid_item_width variable:

 

          {% assign grid_item_width = 'small--one-half medium--one-half large--one-third' %}
          {% for product in collections[section.settings.home_featured_products].products %}
            {% include 'product-grid-item' %}
          {% endfor %}

Should be good to go

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Tylermcs
Tourist
6 0 3

 


@Ninthony wrote:

Go into Online Store > Actions > Edit Code on your theme and open "featured-products.liquid" in your sections folder. Scroll to this line:

 

          {% assign grid_item_width = 'medium--one-half large--one-third' %}
          {% for product in collections[section.settings.home_featured_products].products %}
            {% include 'product-grid-item' %}
          {% endfor %}

It's about line 50, you want to add small--one-half to the grid_item_width variable:

 

          {% assign grid_item_width = 'small--one-half medium--one-half large--one-third' %}
          {% for product in collections[section.settings.home_featured_products].products %}
            {% include 'product-grid-item' %}
          {% endfor %}

Should be good to go


Thank you for your quick reply. I have tried your solution, however, it still displaying a single column on the mobile view, is that because of the image size too big? Is there any way to force the image size to scale down in the mobile view in order to display in 2 columns?

 

Thank you;)

0 Likes
Ninthony
Shopify Partner
1898 285 745

This is an accepted solution.

Have you assigned a collection to the section yet? Because the changes didn't take effect on my side till I assigned it a collection. If you can provide a store url and a screenshot of the particular section that you're trying to edit, it would help me identify if I have the right area or not. If you're uncomfortable posting that information here, you can send me a personal message if you enable messaging in your profile, also please send a password if your store is password protected. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Tylermcs
Tourist
6 0 3

Perfect;) It works!

 

Solution:

 

For the record, the page you're referring to is a collection page. Go into collection-template.liquid in your sections folder, you're going to want to do basically the same thing, assuming that you have "Grid Style: Grid" selected on your customize editor for your collection pages, which it looks like you do:

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

Thats at around line 136 assuming no edits have been made.

 

AhmedMustafa
New Member
2 0 1

It's worked, thanks a lot.

0 Likes
souravroy
Excursionist
31 0 6

Hey!

It didn't work for my Brooklyn theme store, Any help would be appreciated.

Thanks.

 

FC1.png

0 Likes
liondragon
New Member
1 0 0

there are some tags in my shopify store.

I have to import featured grid from library.

0 Likes
J888
New Member
2 0 0

Thank you @Tylermcs   It’s worked for me as well : )

0 Likes
Maxim90
Tourist
9 0 5

@Tylermcs Non ha funzionato per me. Mi potete aiutare? vi mando il link del sito www.fdmeasy.it  . Grazie

 

0 Likes