How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

CMS Nest

Option to have no limitations for Webflow CMS Nested Collections. Nest more than 5 items. Nest multiple Collections on a page.

CMS Nest
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
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.

navigator arrow
List
I want this

Collection List

to have the nested Collection List
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsnest-element
copy icon
Value
list
copy icon
Check live example here
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.

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.
how to add cms nest list attributehow to set a dynamic link on webflow
navigator arrow
NEST COLLECTION HERE
I want this
div block icon

Div Block

See how it works
see webflow attributes
to be where the nested Collection List goes
Add this attribute
Description
Name
fs-cmsnest-collection
copy icon
Value
IDENTIFIER
copy icon
This div will be removed and replaced with the nested 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"
how to add cms nest categories attribute
navigator arrow
COLLECTION (to nest)
I want this

Collection List

to be the nested Collection List
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmsnest-collection
copy icon
Value
IDENTIFIER
copy icon
This element is the Collection List we want to nest in the 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 list. It will replace the target div in the 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.
how to add cms nest collection attributehow to set a dynamic link on webflow
navigator arrow
COLLECTION (on template)
I have to add this

Collection List

See how it works
see webflow attributes
ON THE CMS TEMPLATE PAGE of the primary content list
Add this attribute
Description
Name
fs-cmsnest-collection
copy icon
Value
IDENTIFIER
copy icon
This is a required step. Do not miss it. Look at the visuals closely. Watch the video walkthrough.

This Collection List will be hidden on the CMS template page of your list Collection. If your list is "Attractions", this Collection List must go on the "Attractions" CMS Template page. The Collection List should show the referenced "Categories" Collection. "Categories" is our nested list.

Remember, this Collection List is ON THE "ATTRACTIONS" TEMPLATE PAGE.

This is required to know which "Categories" should be nested in "Attraction" items 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.
how to set a cms nest on webflowhow to set a dynamic link on webflow
navigator arrow
NEW FEATURE AND OPTIMIZATION UPDATE

Multi Nested Collection List

See how it works
see webflow attributes
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
how to set a cms nest on webflow

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.