Collection

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.

Core properties

Property	Type	Description
`collection.id`	number	The unique collection 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
`collection.type`	string	`manual` or `automatic`
`collection.published_at`	string	When the collection was published

<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

For large sets of products, split them into pages so the page loads fast:

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'product-card' with product %}
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

Tags and filtering

Property	Type	Description
`collection.tags`	array	All tags used by products in this collection
`collection.all_types`	array	Unique product types in this collection
`collection.all_brands`	array	Unique brand names in this collection

These come from the products in the group. Use them to build filter links:

<ul class="tag-filter">
  {% for tag in collection.tags %}
    <li><a href="{{ collection.url }}/{{ tag | url_encode }}">{{ tag }}</a></li>
  {% endfor %}
</ul>

Filter by type

{% if collection.all_types.size > 1 %}
  <ul class="type-filter">
    {% for type in collection.all_types %}
      <li><a href="{{ collection.url }}?type={{ type | url_encode }}">{{ type }}</a></li>
    {% endfor %}
  </ul>
{% endif %}

Sorting

Property	Type	Description
`collection.sort_by`	string	The current sort order
`collection.default_sort_by`	string	Alias for `sort_by`

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>

Property	Type	Description
`collection.next_product`	string	URL of the next product in the collection
`collection.previous_product`	string	URL of the previous product in the collection

These are set on product pages when the visitor came from a collection. Use them for "Next" and "Back" links:

{% if collection.previous_product %}
  <a href="{{ collection.previous_product }}">Previous</a>
{% endif %}
{% if collection.next_product %}
  <a href="{{ collection.next_product }}">Next</a>
{% endif %}

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>