Related collections

Show related collections on the collection page using a collection list section

What are related collections?

Dividing a main collection to smaller, more focused subcollections can make it easier for customers to navigate and discover new items. A collection list section can be used to create an additional subcollection navigation on a collection page. For example, a computing collection could show links to desktops, laptops, monitors or storage.

How to show related collections on a collection page?

There are two approaches. The first method shows the same list of collections for every collection using a given template. The second method uses metafields and metaobjects to show a different list of related collections for each collection. 

Note

When using different collection templates, it's worth noting that any automatically created collection templates (such as /collections/all or a vendor or type filtered collection page) will use the default template.

How to show the same related collections on each collection template

Steps

  1. Open the Theme Editor and use the template picker dropdown to select your collection template (e.g. default collection)
  2. Add a Collection list section under the Collection banner.
  3. Choose a list of collections to show.
  4. In the Shopify admin area go to Products > Collections, check the collections use the correct collection template.

Note

The collection list section is left aligned and can be a carousel or grid.

How to show different related collections on each collection

While it is straightforward to show the same list of collections on every collection page using a given template, there is another method where each collection can show a different list of subcollections. To make this collection specific subcollections list requires the creation of new metaobject to hold information about each collection (image, collection name, reference) and a new collection metafield to hold the list of related collections.

Note

Using this method for sub collections requires an advanced level of understanding of how metafields and metaobjects work. For support on custom data, refer to the Shopify metafields guide.

There are five steps required:

1. Create a metaobject definition to hold the three pieces of information that we need about a collection - i.e. what the collection is, an alternative image and a display name so it can be easily identified.

2. Create an entry for every collection that could be used as a subcollection in this metaobject.

3. Create a collection metafield of type metaobject reference to specify the list of related collections (i.e. which subcollections to show).

4. Create a new collection template for collections which will have subcollections. Add a collection list section to this new collection template and select the new metaobject as the dynamic data source. 

5. Edit each collection to pick the appropriate related collections, and assign the collection to the new template.

Caution

It is strongly recommended to create a separate collection template (not default) for this feature so that any automatically created collection templates which use the default template (such as /collections/all or a vendor or type filtered collection page) or collections without subcollections are displayed correctly without extra space in the layout.

Steps

  1. In the Shopify admin area, under Content > Metaobjects click on Add definition to add a metaobject that contains the following three metafields:
    1. Collection name - Type: Single line text. This is used so that you can easily add the collection.
    2. Alternative image - Type: File (image) This is used to hold an alternative collection image. 
    3. Collection reference - Type: Reference to a collection (single collection) This is used to hold the link to the related collection.
  2. In the Shopify admin area, under Content > Metaobjects select the new metaobject and Add entry to add the data to this metaobject. Add a name, link and image for every collection which could be used as a subcollection. 
    Sub-collection.png
  3. In the Shopify admin area under Settings > Custom data > Collections > Add definition, create a collection metafield to reference the new metaobject. Type: Reference to a metaobject (list of entries) Image showing metaobject.png
  4. Open the Theme Editor, create a new collection template. Add a Collection list section under the Collection banner. Go to the first block and click on the top dynamic sources link next to the word collection to select the new metaobject collection list and alternative image. (Note - Only one collection list block is required when referencing the metaobject.) 
    Sub-collection-video.gif
  5. In the Shopify admin area go to Products > Collections. For each collection where you require subcollections, edit the collection and scroll down to find the new metafield which can hold the list of collections. Choose the required related collections and change the collection to use the new collection template.
    Add-collections

Note

The collection list layout is left aligned and can be a carousel or grid. Be sure to check that all collections using the template have a list of collections chosen to avoid showing a section without any content. 
Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us