The collection template renders the collection page, which lists all products within a collection.

The collection object

You can access the Liquid collection object to display the collection details.

Filter collections

You can use storefront filtering to filter collections into smaller subsets of products.

Sorting products in a collection

You can choose the order that products are sorted in through the sort_by URL parameter on collection pages:

Through the collection object, you can access the following:

  • The available options with the sort_options attribute.
  • The currently selected option, if one is selected, with the sort_by attribute.
  • The default option with the default_sort_by attribute.

You can output the available options in a <select> element for customers to make their selection, and you can initialize the selector based on the current and default options. When a new selection is made, you should use JavaScript to append the URL parameter and refresh the page.

The following is a simple example of a sort order selector, and accompanying JavaScript:

Paginate products

Products can be accessed through the products attribute of the collection object, and have a limit of 50 per page. For this reason, you should paginate a collection’s products to ensure that they’re all accessible: