2 Columns on Homepage / Shop page Brooklyn Theme

New Member
7 0 0

Hello,
Good day!
so ive been searching on how to make 2 columns on homepage and shop page on brooklym theme mobile view.

Right now, brooklyn can show only 1 column.

been looking for an answer but could not find the right code to change it.

Can anyone help me please.

 

Thanks.

0 Likes

Here is a step-by-step instruction that can help you to make 2 columns on a Homepage and a Shop page on a Brooklyn theme mobile view.

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

Follow these steps:

  1. From your Shopify admin, go to Online Store > Themes (In this example I have managed Brooklyn theme).
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the Snippets / collection-template.liquid file.
  4. You should find this lins in the file (line 120):
{% elsif section.settings.collection_products_grid == 'grid' %}
<div class="grid-uniform">
{% assign grid_item_width = 'medium--one-half large--one-third' %}

and replace with (add 'small--one-half' class for mobile view:

{% elsif section.settings.collection_products_grid == 'grid' %}
<div class="grid-uniform">
{% assign grid_item_width = 'medium--one-half large--one-third small--one-half' %}

And for a Homepage:

On the Edit HTML/CSS page, you can edit the Sections / featured-products.liquid (line 50):
 

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

Add 'small--one-half' class for mobile view:

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

 

Hope this helps you!

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
2 Likes
New Member
7 0 0

Thank you so so so so much..! It perfectly worked..:)

0 Likes
New Member
7 0 0

Hi Arthur,

Thanks again for the help, i hope u can still help me for the last time..:)

I want  to change the Variant Selection on Brooklyn theme to dropdown.

So i followed this guide - https://ecommerce.shopify.com/c/ecommerce-design/t/changing-variant-selectors-from-radio-buttons-to-...


It works perfect but the variant name is not it the same line as variant selection..

For example the current setup is:

Select Color
(Here is the dropdown list under the Variant name)

What I want is the same line not below just like this -

Select Color (Here is the dropdown list right beside the Variant name)

 

I hope you can help me..


Thank you in advance.

0 Likes

Hello Chloe,

Could you provide me a link to your site, please? And a storefront password if your site is protected now.

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
7 0 0

Hi,

Here is the link - http://bit.ly/2pQnjAe

and password is - "1234567"

As you will notice the dropdown is right under the  Variant name, how can i make it that the variant name is inline with dropdown list..

 

Thank u in advance..

0 Likes

Try to add this code. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
You should go to the bottom lines in the file and Paste this code:

/* ========= custom CSS ======== */
.radio-wrapper .single-option-radio__label {
 clear: both;
 margin: 10px 10px 10px 0;
 min-width: 90px;
 text-align: left;
}
.radio-wrapper .single-option-selector__radio {
 display: table;
 min-width: 213px;
}

Hope it helps!)

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
7 0 0

Hi,

Thanks i put it..but it just make the variant name and variant option aligned to the left..:)

I know its too much to as but i want the variant option to be right side of the variant name -

Current setup -

Select Color
Color Dropdown option

Select Size
Size Dropdown option

What i want is beside (inline)

Select Color - Color Dropdown option
Select Size -  Size Dropdown option
 

Thank u again and sorry for the trouble..:)

0 Likes

Well, we'll try again. Replace with this code:

/* ========= custom CSS ======== */
.radio-wrapper .single-option-radio__label {
 clear: both;
 margin: 8px 10px 8px 0;
 min-width: 90px;
 text-align: left;
 float: left;
}
.radio-wrapper .single-option-selector__radio {
 display: table;
 min-width: 213px;
}

 

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
7 0 0

Thank you so so so so so so much..It works perfectly..

Again, thanks for your time, i know its precious. :)

have a nice day to u..

 

thanks again.:)

0 Likes