Webflow’s Limitations
The nested collections feature, which is available by default in the Webflow Designer, is a powerful tool. You can place a collection inside a collection on every static page (e.g. display tags or categories on the main blog page).
Webflow has, however, provided this feature with two drastic limitations:
- Nested collection items are limited to a maximum of 5 items.
- Maximum one nested collection list per page.
Webflow says:
…we’ve added these limitations to ensure optimal performance of your site, but we’re currently gathering feedback, and figuring out the best next enhancements for nesting collections.
Webflow Blog, Nested collection lists are here, April 21, 2020
finsweet CMS Nest – interesting solution embedded into the Finsweet ecosystem.
The finsweet-Team (I really love them for their awesome work!) provides a more flexible solution for nested Collections. With this solution, you can add more than 1 nested collection on a page and more than 5 items inside the nested collection.
The major advantage of this solution is that it integrates perfectly into the Finsweet ecosystem and can be combined with other attribute solutions developed by Finsweet. Finsweet also provides very good documentation. The only minor drawback of this solution is that you need to add a second (hidden) collection list at the end of each page where the nested collection should be available. This additional collection holds your reference items and makes your page more structurally complex. The HTML of the respective page contains hidden collections that would not be necessary in the frontend and are only there because Webflow does not provide the required functionality directly within the backend. As a result, the functionality that is actually required in the backend is, so to speak, faked via the frontend.
Depending on the project requirements, it is recommended to test this solution as well as the following jQuery solution to determine which is best suited.
The jQuery .load() function – lightweight and without admin hurdles
An easy and lightweight way to nest unlimited collections with unlimited collection items on any single and dynamic page is to use a (simple) jQuery code snippet. In basic, the jQuery fetches a multi-reference element (i.e it’s. HTML structure) from any page and pulls this element into an HTML embed, that works like a nested collection.
You can set up and style your nested collections wherever you want and use them wherever you want! In contrast to the solution provided by finsweet, no second plain text fields with comma separated lists and no hidden collections are necessary.
In summary, this solution is solely based on the lightweight jQuery .load() function – a simple way to fetch data from a server and place the returned HTML into a matching element. It convinces by its simplicity and a clean html structure without additional hidden collections.
Demo and clonable
I have described the functionality of the jQuery .load() function for nested collection lists in a demo project.
In this project I explain how to include multiple nested collections in a static page without degrading the performance of the page.
In addition. you’ll find a clonable version of this project in the Webflow Showcase.
