Multiple nested Collections on a single page
Add multiple nested Collections without limitation of Collection Items on a single page in your Webflow project.
How to set it up?
Limitations & Solutions

Nested Collection Lists in Webflow

Webflow's Limitations
1 nested List with Max 5 items per page

The nested collections feature, which is available by default in Webflow designer, is a powerful tool. You can place a collection inside a collection on every static page (e.g. display blog tags on the main blog page). Webflow has, however, provided this feature with two drastic limitations: (1) Nested collection items are limited to a maximum of 5 items. (2) 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." (Source, April 21, 2020)

finsweet CMS Nest
Ingenious with only minor drawback

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.

jQuery .load() function
Easy to use 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. This solution was firstly provided by antar (Alex). In basic, the jQuery pulls a multi-reference element from any page 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! No second plain text field with a comma separated list and no hidden collections are necessary.

This solution is based on the jQuery .load() function - a simple way to fetch data from a server and place the returned HTML into a matching element.

How easy is that! Clone and inspect this project (e.g. the blog example) or read the short documentation to start from scretch ;-).

Benefits

Nested Collections with jQuery .load()

Nested Collection in Webflow
More than 1 Nested Collection
You can add unlimited nested collections on a single page.
More than 5 Items
You can add unlimited items inside your nested collection.
Easy to Manage
No additional CMS fields and no hidden collection list.
Secure
No third party widget and no CORS issues since cross domain loading can not be invoked (i.e. the fetched data must use the same domain).
Light code base
Simple and lightweight jQuery code snippet. No additional external javascripts.
Flexible
Flexible solution with which almost all conceivable constellations of nested collections can be implemented.
Nested Collection with jQuery .load()

Example: Unlimited nested Authors and Tags

14 Common Misconceptions About Web Design
Modi inventore minus quaerat saepe repellat sint quia et. Ratione corrupti architecto exercitationem tempora optio aut consequatur id. Aliquid est ad odio earum eum adipisci recusandae odit. Ipsam dolor ex perferendis occaecati velit neque.
September 16, 2021
15 Best Blogs To Follow About Web Design
Velit porro itaque voluptatem facere incidunt eligendi voluptatum quo dignissimos. Repudiandae architecto similique aliquam. Et cupiditate unde odit error ratione ipsa.
September 16, 2021
5 Principles Of Effective Web Design
Qui at soluta maxime earum adipisci aut molestiae dolorum fugit. Ipsum doloremque id saepe vel laudantium a eos odio et et occaecati nesciunt. Deleniti id tempora quis. Ut id rerum voluptatum voluptates quam. Non cupiditate atque.
September 16, 2021
10 Great Examples of Responsive Webdesigns
Perferendis illum in expedita officia maiores sed amet. Harum dolor ex et explicabo quia explicabo libero error cumque. Porro qui vero aut repudiandae id aut delectus et. Corporis nihil corrupti dolorem repellat consequatur consequatur. Deleniti dolores vel libero quae officia ut suscip.
September 16, 2021
10 Web Design Blogs You Can't Miss
Fuga assumenda quia fugit debitis. Eius minima laudantium et consequatur cum doloremque. Est ullam eius ut autem est pariatur voluptas enim. Sint rerum in suscipit et. Aliquid velit suscipit. Corrupti et est officia accusamus facilis. Quibusdam ut et accusantium vitae quia qui aut.
September 16, 2021
Special use Cases

Multi-Image Gallery & Lightbox

If you want to use the nested collections script in conjunction with a multi-image field, for example to display a gallery with more than 5 photos as a nested collection on a static page, you need a slightly different setup.
For this use case you can find a separate clonable project under the following link, in which a simple photo gallery was included as a nested collection as well as a photo gallery that additionally uses a lightbox component.
NEsted Multi-Image Gallery (with Lightbox component)
Need help?
Let me know if you have any questions or suggestions about nested collections in Webflow.
Contact me