Skip to main content

collection

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

Tip

Refer to the collection template, its banner section, and its product grid section in Dawn for an example implementation.

An example of the collection template in Dawn

Anchor to LocationLocation

The collection template is located in the templates directory of the theme:

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

Anchor to ContentContent

You should include the collection object in your collection template or a section inside of the template.

Anchor to The collection objectThe collection object

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

Anchor to UsageUsage

When working with the collection template, you should familiarize yourself with the following:

Tip

If you're using a JSON template, then any HTML or Liquid code needs to be included in a section that's referenced by the template.

Anchor to Filter collectionsFilter collections

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

Anchor to Sort products in a collectionSort products in a collection

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

Example


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:

Example

<select id="sort-by">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}

{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>

<script>
Shopify.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) {
Shopify.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;

Shopify.queryParams.sort_by = value;
location.search = new URLSearchParams(Shopify.queryParams).toString();
});
</script>

Anchor to Paginate productsPaginate 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:

Example

{% paginate collection.products by 20 %}
{% for product in collection.products %}
<!-- product info -->
{% endfor %}

{{ paginate | default_pagination }}
{% endpaginate %}
Was this page helpful?