Nest Collection lists

Updated

Nested Collection lists let you display a values from multiple Collections in a single Collection list.

Collection lists let you add and design dynamic content from CMS Collections or Ecommerce Collections on any type of page.

When you need to display values from multiple related Collections in a single Collection list, you can use a multi-reference field to link one Collection (i.e., a parent Collection) to another (i.e., a child Collection). From there, you can nest a Collection list inside another Collection list to display values from each related Collection. This approach is useful for building multi-level menus or displaying relational content, such as stores and their locations.

Good to know

You can create two nested Collection lists per page and display 10 nested items per parent item.

Overview

To nest Collection lists, you have do the following actions, which we’ll cover in depth.

  • Link a parent Collection to a child Collection with a multi-reference field
  • Edit each Collection item in the parent Collection to choose a value from the child Collection
  • Add a Collection list for the parent Collection to a site page and format it
  • Add another Collection list for the child Collection, nested within the first list, and format it

How to link Collections with a multi-reference field

To create a nested Collection list that displays data from other Collections, you’ll need to link the Collections with a multi-reference field.

The parent Collection contains the multi-reference fields and each one of those fields can be linked to one other Collection (i.e., a child Collection). For example, if you wanted to display a Collection of Taco Bell locations (Collection A) and their location features (Collection B), you’d need to add a multi-reference field in Collection A that links to Collection B.

To do this:

  1. Go to Collection settings for the parent Collection
  2. Click Add new field and choose Multi-reference
  3. Give the field a name (e.g., Features)
  4. Choose the child Collection you want to link the field to from the Collection dropdown
  5. Click Save Field
  6. Click Save Collection

Each Collection item in the parent Collection now has a new field linked to the child Collection that you can choose values from. You’ll need to edit each Collection item to choose the child Collection (e.g., location features) values (e.g., drive-thru, open late, etc.).

How to nest Collection lists

Note

You can’t nest Collection lists inside components.

Prerequisites:

Add a nested Collection list:

  1. Use the Navigator to select the parent Collection list’s Collection item
  2. Add a new Collection list to the parent Collection list’s Collection item

Connect the nested Collection list to the child Collection:

  1. With the nested Collection list selected, go to Element settings > Collection list settings
  2. Choose the child Collection from the Source dropdown

Then, you can add and style dynamic elements in the child Collection list.

Related articles