Nest Collection lists

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.

Overview

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

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

Multi-level nesting

Enterprise plans can nest Collection lists up to three levels deep. For example, a Class course can contain Lessons, and each Lesson can contain Assignments. Multi-level nesting is commonly used in global navigation, global footers, or when displaying highly relational data, such as a location finder.

Collection list ( A ) > Nested Collection list ( B ) > Nested Collection list ( C )

• Collection list ( A ) is a parent
• Collection list ( B ) is a parent and a child — it must contain a multi-reference field that link to values in Collection list ( C )
• Collection list ( C ) is a child

Nested Collection list limits

• Enterprise plans — can create 10 nested Collection lists per page and display up to 100 nested items per parent item
• Non-Enterprise plans — can create two nested Collection lists per page and display up to 10 nested items per parent item — note that these limits are increasing to match the same limits as Enterprise plans soon

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

Prerequisites:

• Add a Collection list to a site page and connect it to the parent Collection
• Add elements, style them, and connect them to Collection fields

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.