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 NEST 2.0
Ingenious but a little bit cumbersome

The finsweet-Team (I really love them for their awesome work!) provides a 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.

This solution, however, is somewhat more complex and cumbersome to administrate. Therefore, this solution is not necessarily easy to understand for your clients. Why? You need to double enter your multi-reference fields as a second plain text filed with a comma separated list. In addition, you have to add a second (hidden) collection list on the static page to hold your multi-reference items.

However, it is definitely recommended to look at this solution and test it out!

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.
Nested Collection in Webflow
More than 5 Items
You can add unlimited items inside your nested collection.
Nested Collection in Webflow
Easy to Manage
No additional CMS fields and no hidden collection list.
Nested Collection in Webflow
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).
Nested Collection in Webflow
Light code base
Simple and lightweight jQuery code snippet. No additional external javascripts.
Nested Collection in Webflow
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