Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Brooklyn Theme: How to increase number of products displayed on the collection page

Solved

Brooklyn Theme: How to increase number of products displayed on the collection page

cupcakes
Excursionist
18 0 3

Hi, I'm using Brooklyn theme.

I've been trying to increase the number of products displayed on my collection page. Right now only 12 products are displayed before you have to go to the next page. 

Any advise will be appreciated! Thanks 

 

Code in sections , 

collection-template.liquid:

<!-- /templates/collection.liquid -->
<div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template" data-grid-type="{{ section.settings.collection_products_grid }}">
{% include 'collection-template' %}
</div>

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "select",
"id": "collection_products_grid",
"label": "Grid style",
"options": [
{
"value": "collage",
"label": "Collage"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "checkbox",
"id": "collection_tags_enable",
"label": "Show collection tags"
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor"
}
]
}
{% endschema %}

 

Code on snippets,

collection-grid-collage.liquid

{% 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 is:

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 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 is_three_row == false %}
{% 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 %}
{% assign grid_item_width = "one-whole medium--one-half large--one-half" %}
{% else %}
{% 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 %}

{% comment %}
If we set is_three_row to true based on the
conditionals above.
{% endcomment %}
{% if 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' %}
{% endif %}

Accepted Solution (1)
Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Please Go to Snippets -> collection-template.liquid and try to find this code.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 12 (12)

Hardik29418
Shopify Partner
2913 418 1083

Hello,

Welcome to the shopify Community.

Please Go to Online Store -> Themes -> Edit code -> Sections -> collection-template.liquid and try to find the selected code which is in below screenshot. Change number 12 to whatever number you want to set (For ex: 24 then it will show 24 products per page).
e100e7a8-3967-45ae-b3af-1f5de112e0a4.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
cupcakes
Excursionist
18 0 3

Hi! Thanks for the info 🙂 

I can't find the code, here is my code on the

collection-template.liquid :

 

Any help is appreciated 🙂 THank you! 

Hardik29418
Shopify Partner
2913 418 1083

This is an accepted solution.

Please Go to Snippets -> collection-template.liquid and try to find this code.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
cupcakes
Excursionist
18 0 3

Thank you so much, it worked! 🙂 

Hardik29418
Shopify Partner
2913 418 1083

@cupcakes Thank  you for the update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Briggette
Visitor
2 0 0

I tried to change the number to 5 or 3 because I only want 3 items will be shown on the Featured Collection but It won't work. When I put a featured collection, and a collection, all item on the collection will be shown. How should I limit this?

Hardik29418
Shopify Partner
2913 418 1083

 

Hello, @Briggette 

Welcome to the shopify Community.

Which theme you are using?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Briggette
Visitor
2 0 0

Brooklyn

Hardik29418
Shopify Partner
2913 418 1083

PLease go to Sections -> Collection-template.liquid and send me the code.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
khamir
Excursionist
11 0 2

part of your answer is missing but managed to go to the section and fix it. thanks!

Hardik29418
Shopify Partner
2913 418 1083

@khamir  Thank you for the update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
quenbllc
Visitor
2 0 0

Hi, I would like to change the number of products displayed on the homepage in the featured collection. The homepage loads to slowly and I need to reduce the number. Right now it's like 48. 

 

I'm using Brooklyn theme.

 

Thank you!