Skip to main content

How to use metafields in the Navigation banner section

Updated over a week ago

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

      1. Navigate to Custom Data and Select Collections

        1. In the left sidebar, click on Settings (at the bottom) and go toCustom data from the menu.

        2. In the Custom data section, click on Collections to add a new metafield definition.

      2. Add Metafield Definition

        1. Click on Add definition.

        2. Fill in the Name and Description fields. For example:

          • Name: Sub collections

          • Description: Sub collections that sit within the primary collection

        3. Click on Select type.

        4. From the dropdown, select Collection.

        5. Choose List of collections to allow selecting moltiple sub-collections.

        6. Click on Save.

Step 2: Assign Metafields to a Collection

  1. Find the metafields section

    1. In the admin menu click on Products, then Collections.

    2. Select the collection you want to edit.

    3. Scroll down to the Metafields section.

    4. Find the Sub collections metafield you created.

  2. Add Sub Collections

    1. Click on the Sub collections field.

    2. Choose the collections you want to add as sub-collections.

    3. Click Save to apply changes.
      ​
      ​

Step 3: Reference the Metafield in the Navigation Banner Section

  1. Edit the Theme

    1. In the admin menu click on Online Store, then Themes.

    2. Click Customize on the theme you are using.

    3. In the theme editor, navigate to the collection template where you want to add the navigation banner.

  2. Add Navigation Banner and connect to metafields

    1. In the left sidebar, click on Navigation banner.

    2. Click on Select type to choose Collection list.

    3. In the Navigation section, click on Connect dynamic source.

    4. Select the Sub collections metafield you created earlier.

    5. 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.

    6. Click Save to apply the 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.

Related Articles
How to set up swatches (for versions after 6th Sept 2024)
How to add custom badges to products
How to set up metafields for Collapsible tabs
How to set up linked products
Momentum Changelog
Did this answer your question?