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 toCustom data
from the menu. - In the Custom data section, click on
Collections
to add a new metafield definition.
- In the left sidebar, click on
-
Add Metafield Definition
- Click on
Add definition
. - Fill in the
Name
andDescription
fields. For example:- Name: Sub collections
- Description: Sub collections that sit within the primary collection
- Click on
Select type
. - From the dropdown, select
Collection
. - Choose
List of collections
to allow selecting moltiple sub-collections. - Click on
Save
.
- Click on
Step 2: Assign Metafields to a Collection
-
Find the metafields section
- In the admin menu click on
Products
, thenCollections
. - Select the collection you want to edit.
- Scroll down to the
Metafields
section. - Find the
Sub collections
metafield you created.
- In the admin menu click on
-
Add Sub Collections
- Click on the
Sub collections
field. - Choose the collections you want to add as sub-collections.
- Click
Save
to apply changes.
- Click on the
Step 3: Reference the Metafield in the Navigation Banner Section
-
Edit the Theme
- In the admin menu click on
Online Store
, thenThemes
. - Click
Customize
on the theme you are using. - In the theme editor, navigate to the collection template where you want to add the navigation banner.
- In the admin menu click on
-
Add Navigation Banner and connect to metafields
- In the left sidebar, click on
Navigation banner
. - Click on
Select type
to chooseCollection list
. - In the Navigation section, click on
Connect dynamic source
. - Select the
Sub collections
metafield you created earlier. - Once you have connected the dynamic source, you will see the sub-collections displayed in the navigation banner.
Note: If the collection you're viewing doesn't have any collections assigned to its metafield then nothing will display. - Click
Save
to apply the changes.
- In the left sidebar, click on
By following these steps, you can successfolly 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.