[{"value":"Location","id":"location","hLevel":2,"level":1},{"value":"Content","id":"content","hLevel":2,"level":1,"children":[{"value":"Collection Object","id":"collection-object","hLevel":3,"level":2}]},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Filtering Collections","id":"filtering-collections","hLevel":3,"level":2},{"value":"Sorting Products","id":"sorting-products","hLevel":3,"level":2},{"value":"Paginating Products","id":"paginating-products","hLevel":3,"level":2}]}]

Collection

The collection template shows a collection page, listing all the products in the collection.

Location

The collection template is in the theme's templates folder:

└── theme
    ├── templates
    |   ...
    |   ├── collection.json
    |   ...
    ...

Content

You can include the collection object in the collection template or within a section of the template.

Collection Object

You can access the Handlebars collection object to show the collection details.

Usage

When using the collection template, you should be familiar with the following:

Filtering collections
Sorting products
Paginating products

Tip

If you use JSON templates, all HTML or Handlebars code must be included within the sections referenced by the template.

Filtering Collections

You can use the storefront filtering feature to filter products on the collection page, supporting filters like stock, price, and attribute values.

Sorting Products

You can choose the sort order of products on the collection page using the sort_by URL parameter:

https://my-store.myshopline.com/collections/shorts?sort_by=price-descending

Through the collection object, you can access:

Available options with the sort_options attribute.
The currently selected option (if any) with the sort_by attribute.
The default option with the default_sort_by attribute.

You can present the available options in a <select> element for customers to choose from, setting it up with the current and default selections. When a new option is selected, use JavaScript to add the URL parameter and refresh the page.

Below is a basic example of a sort order selector with the corresponding JavaScript:

<select id="sort-by">
  {{ assign "sort_by" (default collection.sort_by collection.default_sort_by) }}
  {{#for collection.sort_options as |option|}}
    <option value="{{ option.value }}" {{#if option.value == sort_by }}selected="selected"{{/if}}>
      {{ option.name }}
    </option>
  {{/for}}
</select>
<script>
  let queryParams = {};
  // Preserve existing query parameters
  if (location.search.length) {
    var params = location.search.substr(1).split('&');
    for (var i = 0; i < params.length; i++) {
      var keyValue = params[i].split('=');
      if (keyValue.length) {
        queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      }
    }
  }
  // Update sort_by query parameter on select change
  document.querySelector('#sort-by').addEventListener('change', function(e) {
    var value = e.target.value;
    queryParams.sort_by = value;
    location.search = new URLSearchParams(queryParams).toString();
  });
</script>

Paginating Products

Products can be accessed via the products attribute of the collection object, limited to 50 items per page. Therefore, you should paginate the products in the collection to ensure they are all accessible:

{{#paginate collection.products by=10}}
  {{#for collection.products as |product|}}
    {{ product.title }}
  {{/for}}
  
  <ul class="pagination">
    <li class="paginate-previous">
      <a href="{{ paginate.previous.url }}">Previous</a>
    </li>
    <li class="pagination-page">
      <span>{{ paginate.current_page }}/{{ paginate.pages }}</span>
    </li>
    <li class="paginate-next">
      <a href="{{ paginate.next.url }}">Next</a>
    </li>
  </ul>
{{/paginate}}