Hi! I am trying to figure out how I can edit the grid of a collection-list-section on the homepage. I’m using the Brooklyn theme, and the maximum number of collections in a row is three but I want to have four in a row. Is this possible? I hope somebody can help me!
1 Like
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
1 Like
Hi! Thank you for your reply! The website is www.arthuisamsterdam.com
1 Like
The product page is fine actually! It is the collection list section on the home page that I would like to change. Now you see two collections next to each other (shop and nieuw) and if I add two more collection in this list, they appear below these collections. I would like to have them next to each other, so I have four collections in one row. Is this possible?
1 Like
yes, is possible to custom code
Nice! How is this possible, can you my explain that to me please? I’m not very familiar with custom codes.
@IsabelleMeijer I think it is an easy customization. You can try the following:
- In Shopify Admin, go to Online Channels > Themes > Live theme and in the Actions dropdown select Edit Code
- Open the Sections > featured-products.liquid file
- You will have to replace the following line:
{% assign grid_item_width = 'medium--one-half large--one-third' %}
(If you are using the latest Brooklyn theme, it is line 50)
with this line
{% assign grid_item_width = 'medium--one-half large--one-quarter' %}
As you can see, we are just replacing a CSS class which set the grid item to one-third the width of the grid to one quarter
Thank you for your answer! I replaced the code with the one you gave to me, but the grid is still not how I want it to be. Now there are two collections in a row, and the other two are below that. How can I get all the four of them, next to each other?
O I see that the grid of the products is changed! This was actually alright before, I only want to change the grid of the collection-list-section.
hi, can you send the url to your shop please?
I applied the proposed change to test shop and as you can see I have 4 columns in the homepage’s collection grid and the catalog page is unchanged (4 columns)
The url is www.arthuisamsterdam.com. Next to ‘shop’ and ‘nieuw’ below the header I would like to have two other collections.
Hi @IsabelleMeijer I’m pretty sure that the change I proposed should do the trick.
As it is an easy customization I can apply it to you without charge. Write to me at pablo@peanutbutter.es if you are interested
So it was the Featured Collections section that @IsabelleMeijer wanted to customize.
So, when possible she wanted to have 4 items per row
This grid is originally like this
1 = full width
2 = 2 row
3 = 3 row
4 = 2 row, 2 row
5 = 2 row, 3 row
6 = 3 row, 3 row
7 = 2 row, 2 row, 3 row
8 = 2 row, 3 row, 3 row
9 = 3 row, 3 row, 3 row
10 = 2 row, 2 row, 3 row, 3 row
11 = 2 row, 3 row, 3 row, 3 row
and we changed it to:
1 = full width
2 = 2 row
3 = 3 row
4 = 4 row
5 = 2 row, 3 row
6 = 3 row, 3 row
7 = 3 row, 4 row
8 = 4 row, 4 row
9 = 3 row, 3 row, 3 row
10, 11 = Have not tested as schema only allows up to 9 blocks
This was achieved by replacing snippets/collection-grid-collage.liquid with the following:
{% comment %}
This snippet controls the collage collection grid. Depending on the number of
collections we want to display them in rows of 1, 2, or 3.
You will have at most 2 rows of 2 items and the rest should be rows of 3
The pattern applied to collections after customization by peanutbutter.es is:
1 = full width
2 = 2 row
3 = 3 row
4 = 4 row
5 = 2 row, 3 row
6 = 3 row, 3 row
7 = 3 row, 4 row
8 = 4 row, 4 row
9 = 3 row, 3 row, 3 row
10, 11 = Have not tested as schema only allows up to 9 blocks
This was the original pattern:
1 = full width
2 = 2 row
3 = 3 row
4 = 2 row, 2 row
5 = 2 row, 3 row
6 = 3 row, 3 row
7 = 2 row, 2 row, 3 row
8 = 2 row, 3 row, 3 row
9 = 3 row, 3 row, 3 row
10 = 2 row, 2 row, 3 row, 3 row
11 = 2 row, 3 row, 3 row, 3 row
Change the grid item width by using classes from the grid in
the grid_item_width variable.
Example:
- {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endcomment %}
{% assign previous_index = collection_index | minus: 1 %}
{% assign remaining_length = collection_count | minus: collection_index %}
{% assign previous__remaining_length = remaining_length | minus: 1 %}
{% assign remaining_divisible_by_three = previous__remaining_length | modulo:3 %}
{% assign remaining_divisible_by_four = remaining_length | plus: 1 | modulo:4 %}
{% assign image_size = 'grande' %}
{% if collection_index < 4 %}
{% assign is_three_row = false %}
{% comment %}
check to see if the remaining items are divisible by three
after the first row of 2.
{% endcomment %}
{% if previous_index == 2 and remaining_divisible_by_three > 0 %}
{% assign is_three_row = true %}
{% endif %}
{% endif %}
{% comment %}
Once we have set the first 4 items in the grid we can
place the rest in rows of three
{% endcomment %}
{% if collection_index > 4 %}
{% assign is_three_row = true %}
{% endif %}
{% comment %}
If the total number of collections is divisible by 3, use 3 rows
{% endcomment %}
{% if divisible_by_three == 0 %}
{% assign is_three_row = true %}
{% endif %}
{% if collection_index < 4 and collection_count == 7 %}
{% assign is_three_row = true %}
{% endif %}
{% if collection_index == 1 or collection_index > 3 %}
{% if remaining_divisible_by_four == 0 and collection_count < 9 %}
{% assign is_four_row = true %}
{% endif %}
{% endif %}
{% comment %}
If we set is_three_row to true based on the
conditionals above.
{% endcomment %}
{% if is_four_row == true %}
{% comment %}
If we are on the first collection we need to set the small BP column width
depending on whether the total number of collections is divisible by 2.
Or we want to set the width to one-whole if it is the only collection being
shown.
{% endcomment %}
{% if collection_index == 1 and remaining_length == 0 %}
{% assign grid_item_width = "one-whole" %}
{% assign grid_item_responsive = true %}
{% elsif collection_index == 1 and divisible_by_two > 0 %}
{% comment %}
The following was the original line, which was replaced to create a 4 column grid
{% assign grid_item_width = "one-whole medium--one-half large--one-half" %}
{% endcomment %}
{% assign grid_item_width = "one-whole medium--one-half large--one-quarter" %}
{% else %}
{% comment %}
The following was the original line, which was replaced to create a 4 column grid
{% assign grid_item_width = "one-half medium--one-half large--one-half" %}
{% endcomment %}
{% assign grid_item_width = "one-half medium--one-half large--one-quarter" %}
{% endif %}
{% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %}
{% include 'collection-grid-item' %}
{% elsif is_three_row == true %}
{% comment %}
Assign grid classes for 3 rows.
If we are on the first collection we need to set the small BP column width
depending on whether the total number of collections is divisible by 2.
{% endcomment %}
{% if collection_index == 1 and divisible_by_two > 0 %}
{% assign grid_item_width = "one-whole medium--one-third large--one-third" %}
{% else %}
{% assign grid_item_width = "one-half medium--one-third large--one-third" %}
{% endif %}
{% comment %}Product Grid Item{% endcomment %}
{% include 'collection-grid-item' %}
{% else %}
{% comment %}
If we are on the first collection we need to set the small BP column width
depending on whether the total number of collections is divisible by 2.
Or we want to set the width to one-whole if it is the only collection being
shown.
{% endcomment %}
{% if collection_index == 1 and remaining_length == 0 %}
{% assign grid_item_width = "one-whole" %}
{% assign grid_item_responsive = true %}
{% elsif collection_index == 1 and divisible_by_two > 0 %}
{% comment %}
The following was the original line, which was replaced to create a 4 column grid
{% assign grid_item_width = "one-whole medium--one-half large--one-half" %}
{% endcomment %}
{% if collection_count != 5 %}
{% assign grid_item_width = "one-whole medium--one-half large--one-quarter" %}
{% else %}
{% assign grid_item_width = "one-whole medium--one-half large--one-half" %}
{% endif %}
{% assign grid_item_width = "one-whole medium--one-half large--one-half" %}
{% else %}
{% comment %}
The following was the original line, which was replaced to create a 4 column grid
{% assign grid_item_width = "one-half medium--one-half large--one-half" %}
{% endcomment %}
{% if collection_count != 5 %}
{% assign grid_item_width = "one-half medium--one-half large--one-quarter" %}
{% else %}
{% assign grid_item_width = "one-half medium--one-half large--one-half" %}
{% endif %}
{% assign grid_item_width = "one-half medium--one-half large--one-half" %}
{% endif %}
{% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %}
{% include 'collection-grid-item' %}
{% endif %}
and in assets/theme.css.liquid
added this around line 416:
$collectionCollageRowHeightSmaller: 241px;
just below this:
// Collection Collage Grid
// These heights are used to determine the row height for the
// collection grid.
$collectionCollageRowHeightFull: 450px;
$collectionCollageRowHeightLarge: 310px;
$collectionCollageRowHeightSmall: 280px;
And added this around line 1508:
&.large--one-quarter {
height: $collectionCollageRowHeightSmaller;
}
just below this:
&.large--one-third {
height: $collectionCollageRowHeightSmall;
}
1 Like
Wauw thank you! This is what I was looking for! The website looks exactly how i wanted to be! Very very happy with it, thank you for your time and efforts. Really appreciatie it!
Nice that you are happy with the result!
Cheers!