Set up subcollections in your collection pages

This guide will show you how to set up subcollections (additional collections) to display in the “Subcollections” section of the main collection and brand collection templates.

Setting up metafields

The first thing you will need to do is set up the “Subcollections” metafield. This metafield creates the connection between a collection and its subcollections.

Navigate to your store’s admin, and in the bottom left corner click on “Settings“. Then navigate to “Custom data” from the left-hand side menu and then click on “Collections“. You should be seeing the following screen (although perhaps without any metafield definitions yet):

Then click on the top right button that’s labelled as “Add definition“, and in the dialogue enter the following settings:

Name: Subcollections

Namespace and key: custom.subcollections. This metafield key is important that it’s named exactly like this.

Select type: Select the “Collection” type, and then click on “List of collections” from the toggle that will appear at the bottom.

The details should be exactly as in the screenshot below:

Hit the “Save” button. The metafield has been successfully defined. Let’s see how to use it.

Adding subcollections to a collection

After you’ve defined your subcollections metafield, navigate to any of your store’s collections in your store admin by going to “Products”, and then “Collections” from the main navigation on the left.

Scroll all the way to the bottom and you will notice that the “Subcollections” metafield you defined in the previous step exists as a form input. Clicking on the input will open up the collection selection dialogue.

Simply select the collections you wish to show up as subcollections and hit “Save“.

Displaying the subcollections section in the collection page

Edit your collection in the store editor by visiting it on the frontend and clicking on the “Customize” button in the store’s toolbar.

On the left side you will notice the “Subcollections” section. You should also be seeing the subcollections underneath the collection banner by default. If the section is disabled (dimmed), enable it by hovering over its title and clicking on the “eye” icon.

You can adjust the section’s appearance from its settings on the right. You can read more about them on the collection template documentation.