Shopify themes, liquid, logos, and UX
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 %}
Solved! Go to the solution
This is an accepted solution.
Please Go to Snippets -> collection-template.liquid and try to find this code.
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).
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!
This is an accepted solution.
Please Go to Snippets -> collection-template.liquid and try to find this code.
Thank you so much, it worked! 🙂
@cupcakes Thank you for the update.
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?
Hello, @Briggette
Welcome to the shopify Community.
Which theme you are using?
Brooklyn
PLease go to Sections -> Collection-template.liquid and send me the code.
part of your answer is missing but managed to go to the section and fix it. thanks!
@khamir Thank you for the update.
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!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024