Brooklyn Theme Featured Product Layout

Solved
Highlighted
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
Highlighted
Shopify Partner
1435 194 488

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
1 Like
Highlighted
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
Highlighted
Shopify Partner
1435 194 488

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
2 Likes
Highlighted
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.

 

2 Likes
Highlighted
New Member
2 0 0

It's worked, thanks a lot.

0 Likes
Highlighted
Excursionist
31 0 6

Hey!

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

Thanks.

 

FC1.png

0 Likes