Functional
CMS Nest
Option to have no limitations for Webflow CMS Nested Collections. Nest more than 5 items. Nest multiple Collections on a page.
Get Started
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Add this attribute
Description
Name
fs-cmsnest-element
Value
list
This is the CMS Collection List that will display the primary list of content. This is the list we want to add a nested Collection to. We will call this the "parent" list".
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
IMPORTANT - In the Collection Item, it is required to have a link that is connected to the CMS Template page for that item.*
*See screenshot graphic below — we show the link containing all of the item contents. This link is connected to the CMS Template page, "Current Attraction". This is a link placement if you want the user to navigate to the CMS Template Page. If you do not want the user to navigate to the CMS Template page, you may hide the link inside the Collection Item. The link does not have to be visible or clickable by the user. The only requirement is to have a link that is connected to the CMS Template page for that item.
For example, if we want to display "Attractions" and nest a "Categories" Collection List, this attribute would be placed on the "Attractions" Collection List. This is the primary list of content that we want to show.
IMPORTANT - In the Collection Item, it is required to have a link that is connected to the CMS Template page for that item.*
*See screenshot graphic below — we show the link containing all of the item contents. This link is connected to the CMS Template page, "Current Attraction". This is a link placement if you want the user to navigate to the CMS Template Page. If you do not want the user to navigate to the CMS Template page, you may hide the link inside the Collection Item. The link does not have to be visible or clickable by the user. The only requirement is to have a link that is connected to the CMS Template page for that item.
Add this attribute
Description
Name
fs-cmsnest-collection
Value
IDENTIFIER
This div will be removed and replaced with the "child" Collection List.
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories"
This is where the the child Collection List will be added inside the parent Collection list.
This must be inside the CMS Item of the "list" element.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories"
Add this attribute
Description
Name
fs-cmsnest-collection
Value
IDENTIFIER
This element is the child Collection List content we want to nest inside the parent Collection List.
This Collection List can be anywhere on the page. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
Do not hide this Collection List. If it is set to "display: none", it will not be shown in the parent list.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories". This must match the same IDENTIFIER as the empty div that's nested in the list.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
This Collection List can be anywhere on the page. It will be removed from its location and added to each CMS Item of the parent list.
This child Collection List will replace the target div we set in the parent Collection List item.
Do not hide this Collection List. If it is set to "display: none", it will not be shown in the parent list.
For example, if we want to display "Attractions" and nest a "Categories" Collection, this attribute would be placed on the "Categories" Collection List.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories". This must match the same IDENTIFIER as the empty div that's nested in the list.
In the Collection Item, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
It is not required for this link to be clickable or visible for the user. The only requirement is that a link to the CMS Template page is inside the Collection Item.
COLLECTION (on template)
I have to add this
Collection List
See how it works
ON THE CMS TEMPLATE PAGE of the primary content list
Add this attribute
Description
Name
fs-cmsnest-collection
Value
IDENTIFIER
This is a required step. Do not miss it. Look at the visuals closely. Watch the video walkthrough.
This child Collection List will be hidden on the CMS template page of your parent list Collection.
Example: Attractions = parent list. Categories = child nested list.
If our primary list is "Attractions", this Collection List element must go on the "Attractions" CMS Template page. (See screenshot)
The Categories Collection List on the Attractions Template page must be binded to the multi-reference field "Categories". (See screenshot)
This is required to know which "Categories" should be nested ineach "Attraction" item on our primary page.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories". This must match the same IDENTIFIER as the empty div that's nested in the list.
In the Collection List, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
This child Collection List will be hidden on the CMS template page of your parent list Collection.
Example: Attractions = parent list. Categories = child nested list.
If our primary list is "Attractions", this Collection List element must go on the "Attractions" CMS Template page. (See screenshot)
The Categories Collection List on the Attractions Template page must be binded to the multi-reference field "Categories". (See screenshot)
This is required to know which "Categories" should be nested ineach "Attraction" item on our primary page.
IDENTIFIER should be a descriptive word that identifies your Collection. For example, fs-cmsnest-collection = "attraction-categories". This must match the same IDENTIFIER as the empty div that's nested in the list.
In the Collection List, it is required to have a link that is connected to the CMS Template page. See screenshot graphic below.
NEW FEATURE AND OPTIMIZATION UPDATE
Multi Nested Collection List
See how it works
Collection > Nested Collection > Nested Collection > ...
+ caching speed boost update
Multi nest any amount of Attributes CMS Nest implementations inside each other. Simulate a multiple levels of nested Collection Lists. There are no limitations of nesting levels.
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
Caching:
Attributes now includes a caching system for all previous, current, and future implementations of CMS Nest.
Example:
A Collection list that has 100 items. Each item has a nested list of 20 items. And each nested item has another nested list of 10 items.
Without the caching system, this would mean that the system would perform: 100*20*10 = 20,000 requests
With the caching system, requests are stored so:
100+20+10 = 130 requests
You can sum up the total amount of items to nest (not multiply) to estimate the amount of requests. This optimization is rolled out to all previously implemented CMS Nest instances.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
No attribute needed.
Example:
Our primary Collection is "Attractions". Inside this Collection we nest "Categories". This is the example shown on this docs page. With the multi nest update, you can now nest the "Type" Collection inside "Categories". "Type" is a reference Collection of "Categories". We can now access the "Type" Collection inside the primary outer Collection of "Attractions". This concept is a nested list inside of a nested list inside of a nested list.
Caching:
Attributes now includes a caching system for all previous, current, and future implementations of CMS Nest.
Example:
A Collection list that has 100 items. Each item has a nested list of 20 items. And each nested item has another nested list of 10 items.
Without the caching system, this would mean that the system would perform: 100*20*10 = 20,000 requests
With the caching system, requests are stored so:
100+20+10 = 130 requests
You can sum up the total amount of items to nest (not multiply) to estimate the amount of requests. This optimization is rolled out to all previously implemented CMS Nest instances.
In the below example, we show a 4 level of nesting concept.
Project Collection
> Categories Collection
> > Services Collection
> > > Color Collection
Working examples
See this solution working live in this Webflow project.
Example
Add a nested collection list with more than 5 items
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
