How to use metafields in the Navigation banner section

A Baymard study shows that customers in certain industries only use search 10% of the time and prefer menus and curated paths to find the products they're looking for.

To help with this experience we built the Navigation banner section which supports metafields; Allowing you to build funnels to more specific collection on collection templates as well as a host of other uses.

Below is a guide on how you can use this section, with metafields, to create sub-collections on your Collection templates.

Step 1: Create a Collection Metafield Definition

Navigate to Custom Data and Select Collections

In the left sidebar, click on Settings (at the bottom) and go to Metafields and metaobjects from the menu.
In the Custom data section, click on Collections to add a new metafield definition.

Add Metafield Definition.

Click on Add definition.
Fill in the Name and Description fields. For example:Name: Sub collections Description: Sub collections that sit within the primary collection.
From the dropdown, select Collection.
Choose List of collections to allow selecting multiple sub-collections.
Click on Save.

Step 2: Assign Metafields to a Collection

Step 1: Find the metafields section

From your Shopify admin, go to Products, then click on Collections.
Select the collection you’d like to edit.
Scroll down the page until you see the Metafields section.
Locate the Sub collections metafield you created earlier.

Step 2: Add sub-collections

Click into the Sub collections field.
Choose the collections you’d like to add as sub-collections.
Once you’re happy with your selection, click Save to apply the changes.

Step 3: Reference the Metafield in the Navigation Banner Section

Step 1: Edit the theme

In your Shopify admin, go to Online Store > Themes.
Find the theme you’re using and click Customize.
Once in the theme editor, navigate to the Collection template where you’d like to add the navigation banner.

Step 2: Add the navigation banner and connect it to metafields

In the left-hand sidebar of the theme editor, click on Navigation banner.
Under Select type, choose Collection list.
In the Navigation section, click Connect dynamic source.
From the options, select the Sub collections metafield you created earlier.
Once connected, you’ll see your sub-collections appear in the navigation banner.

Remember: If the collection you’re viewing doesn’t have any collections assigned to its metafield, nothing will display.

Finally, click Save to apply your changes.

By following these steps, you can successfully set up metafields to showcase sub-collections in the navigation banner on your collection pages. This method can be adapted for other uses as well, offering flexibility in displaying various types of content dynamically. This will not only enhance the look of your store but also make it easier for your customers to find what they are looking for.