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

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:

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:

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: