Nest Collection lists

Updated

Display a Collection list within another Collection list to nest content.

Collection lists let you add and design dynamic content from CMS Collections or Ecommerce Collections on any type of page. You can nest Collection lists to reference content from one Collection inside another Collection, which can be useful for creating multi-level menus or displaying relational content (e.g., stores and locations, etc.).

Good to know

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

How to link Collections with a multi-reference field

To create a nested Collection list that displays data from two different Collections, you’ll need to link those two Collections with a multi-reference field. For example, if you wanted to site that displays a Collection of Taco Bell locations and their location features, you’d need to link a Collection of locations and a Collection of features together.

To do this:

  1. Go to Collection settings for the parent Collection (the Collection that pulls in and displays data from the second Collection — in the example above, Taco Bell locations would be 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 (e.g., Location features) from the Collection dropdown
  5. Click Save

Then, edit each Collection item in your parent Collection (e.g., Taco Bell locations). Find the Multi-reference field (e.g., Features), click into the dropdown, and add the fields you’d like to connect (e.g., drive-thru, open late, etc.).

How to nest Collection lists

Note

You can’t nest Collection lists inside components.

Before nesting Collection lists, you’ll need to add and style the parent Collection list on the canvas. Once you’ve added and styled the parent Collection list:

  1. Drag a new Collection list inside the parent Collection list’s Collection item (e.g., Taco Bell locations) — you can place it precisely in the Navigator
  2. Go to Element settings > Collection list settings and choose the child Collection (e.g., Location features) from the Source dropdown

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

 

Related articles