How to Nest Webflow CMS Collections with Finsweet CMS Nest

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to use Finsweet CMS Nest to combine multiple Webflow CMS collections into one unified list.

Understanding the CMS Nest use case

Webflow limits nested references to one level: you can access the fields of a linked collection, but not the fields of a collection linked to that linked collection. CMS Nest works around this limit by nesting Collection Lists inside one another, powered by Reference or Multi-Reference fields.

1. Add the script to the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js" defer>script>

2. Set up the parent Collection List

On your parent Collection List Wrapper (for example: Articles), add fs-cmsnest-element="list". This collection must include a Reference or Multi-Reference field to the child collection.

3. Add the child Collection List in the template

In the template of your parent Collection List, add a new Collection List linked to the child collection. On its Wrapper, add fs-cmsnest-element="list" and fs-cmsnest-collection="[child-collection-name]". Finsweet automatically syncs each child item with its parent through the Reference field.

4. Access the child collection fields

In the child Collection List template, connect your elements to the child collection fields as usual. Finsweet injects the matching data into each parent item.

Conclusion

CMS Nest unlocks complex CMS architectures without going through the API. Use cases:

• Display articles from a category in a category list
• List team members in a department list
• Display products from a brand in a brand catalog