Skip to main content

list-collections

The list-collections template renders the collection list page, which lists all the store's collections. This page is located at the /collections URL of the store.

Tip

Refer to the list-collections template and its main section in Dawn for an example implementation.

An example of the list-collections template in Dawn

Anchor to LocationLocation

The list-collections template is located in the templates directory of the theme:

└── theme
├── layout
├── templates
| ...
| ├── list-collections.json
| ...
...

Anchor to ContentContent

You can include the following in your list-collections template or a section inside of the template:

Anchor to The collections objectThe collections object

You can access the Liquid collections object to display the store's collections.

Anchor to UsageUsage

When working with the list-collections 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 Change the order of collectionsChange the order of collections

Typically, this template includes the following loop through the collections to output the display, which outputs the collections in alphabetical order:

Example

{% for collection in collections %}
<!-- collection info -->
{% endfor %}

If you want to change the order, then you can build a menu to host the collections in your desired order, and loop through the menu items. If you use this method, then you should build a setting to allow merchants to select the menu that's used. You can access the menu through the Liquid linklist object, filter the menu items for collections based on link.type, and access the collection information through link.object.

For example:

{% for link in settings.collection_list_menu.links %}
{% if link.type == 'collection_link' %}
{% assign collection = link.object %}

<!-- collection info -->
{% endif %}
{% endfor %}

Anchor to Collection image fallbackCollection image fallback

You should have a fallback for the case that a collection doesn't have a collection image. For example, you might use the image of the first product within the collection:

{% if collection.image %}
{{ collection.image | image_url: width: 450, height: 450 | image_tag: collection.image.alt }}
{% else %}
{% assign alt = collection.title | escape %}
{{ collection.products.first.image | image_url: width: 450, height: 450 | image_tag: alt }}
{% endif %}
Was this page helpful?