Collection
The collection object for grouped products, with filtering and sorting.
The collection object holds a group of products. It is the main object on collection pages. You can also loop over all collections with the global collections object.
Properties
| Property | Type | Description |
|---|---|---|
collection.id | string | The unique ID |
collection.title | string | The collection title |
collection.handle | string | The URL slug (e.g. summer-sale) |
collection.description | string | The HTML description |
collection.url | string | The URL path to the collection page |
collection.image | image | The collection image, if one is set |
<h1>{{ collection.title }}</h1>
{% if collection.description != blank %}
<div class="description">{{ collection.description }}</div>
{% endif %}Products
| Property | Type | Description |
|---|---|---|
collection.products | array | The products in this collection |
collection.products_count | number | Number of available products |
collection.all_products_count | number | Total products, including those out of stock |
{% for product in collection.products %}
<div class="product-card">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</div>
{% endfor %}Pagination
Large collections should use pagination to keep page load times fast:
{% paginate collection.products by 24 %}
{% for product in collection.products %}
{% render 'product-card' with product %}
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}Tags
| Property | Type | Description |
|---|---|---|
collection.tags | array | All tags used by products in this collection |
These tags come from the products, not the collection itself. They are useful for building filter menus:
<ul class="tag-filter">
{% for tag in collection.tags %}
<li><a href="{{ collection.url }}/{{ tag | url_encode }}">{{ tag }}</a></li>
{% endfor %}
</ul>Sorting
| Property | Type | Description |
|---|---|---|
collection.sort_by | string | The current sort order |
The sort order is set by the visitor or by the collection's default. You can build a sort menu:
<select onchange="window.location = this.value">
<option value="{{ collection.url }}?sort_by=best-selling">Best Selling</option>
<option value="{{ collection.url }}?sort_by=price-ascending">Price: Low to High</option>
<option value="{{ collection.url }}?sort_by=price-descending">Price: High to Low</option>
<option value="{{ collection.url }}?sort_by=title-ascending">A–Z</option>
<option value="{{ collection.url }}?sort_by=created-descending">Newest</option>
</select>Metafields
| Property | Type | Description |
|---|---|---|
collection.metafields | object | Custom data fields for this collection |
Accessing all collections
Use the global collections object to loop over every collection in the store:
{% for collection in collections %}
<a href="{{ collection.url }}">
{% if collection.image %}
{{ collection.image | image_tag }}
{% endif %}
<p>{{ collection.title }}</p>
</a>
{% endfor %}You can also access a collection by handle:
{% assign sale = collections['summer-sale'] %}
<p>{{ sale.title }} – {{ sale.products_count }} products</p>