Webflow is a website designer and developer's Web Builder of choice for many good reasons. Still, it's not without its limitations and front of mind is the limitation on Nested Collections.

Nested Collections in Webflow differ from traditional Collections as they sit within the primary Collection as repeatable content. This nesting is particularly useful when a Collection has multiple repeatable criteria, choices and characteristics. For example, each product may include a Colour variant in a 'Products' collection. Rather than adding the colour choice as an Option dropdown under the product in the CMS, it's better to implement Colour choices as a Multi-reference field drawing from a 'Colour' Collection. The colours (with their colours set in the Colours Collection) are then added as a nested Collection in the Products Collection to offer easily updateable colour options on an item-by-item basis. So, all this sounds good until you hit the Webflow Nested Collection limitations, and these are far-reaching: -

Webflow Nested Collection Limits

  1. Only one Nested Collection List per Page
  2. Only five items per Nested Collection List

With these highly restrictive and seemingly arbitrary Nested Collection limitations, it's easy to see how Nested Collections, which should be a vital component of Webflow CMS functionality, rapidly become highly problematic. For example, taking our Product Colour analogy above, it's unlikely that all products come in less than five colourways, sizes, weights etc. And this limitation extends to any other items where you want to display those bonded differentiations within a Collection List. 

Solutions to Webflow Nested Collection Limits

1. Webflow 

First and foremost, the overarching solution should come directly from Webflow. These Dynamic Content Limitations have been hindering Webflow for an extended time and are a regular complaint on the Webflow forum and the wider Webflow Community. Webflow cannot let these limitations remain, for whatever reason, especially as they have stopped developing Webflow Memberships and Webflow logic to focus on the core product. Being at the core of the CMS, it should be foremost in their Roadmap, and hopefully, they will remove the limits with a timely update around Webflow Conf or sooner. 

2. jQuery load from the Collection Item template page

Webflow includes two essential scripts in the HTML when publishing, and those are: -

  1. Webflow.js - Webflow's micro-library for scripted components
  2. jQuery - the popular JavaScript library externally hosted on Google's CDN

As jQuery bundles and loads with Webflow, we should undoubtedly harness it to perform a range of scripting tasks beyond Webflow interactions or that jQuery performs readily. Indeed the jQuery .load method has been a staple here for some time, and there are also examples elsewhere. This .load approach differs in implementation and is a quick and easy way to add multiple Nested Collections (or any wrapped content) to a Collection List on a page without number limitations.

How the Webflow jQuery Load Nested Collection method works

The primary dependency is that the Collections to be Nested must exist in divs with specific IDs on the CMS Collection Template pages. jQuery programmatically pulls this content via jQuery Load into the corresponding Collection Item into a target divs, with particular data attributes, in the Collection List. It's all pretty straightforward, and other than ensuring the Nested Collection Lists (or any other wrapped content) exist, you only need to set a couple of parameters in the jQuery code for it all to work. 

jQuery Load Webflow Nested Collection into Collection List Items

The following is how to set up the jQuery load Webflow Nested Collection into Collection List Items. In this example, we have renamed Collection classes in line with dummy 'Products'.

1. Create, or ensure you have the items to nest on the Collection Template Page (i.e., Products Template) and then give the Collection Wrapper (or any other element to nest) an ID in the form nest-1, nest-2, nest-3, etc. 

2. Create the main Collections List wherever you want it to display (i.e. Home Page).

3. Set the 'Collection Item' (i.e. Products Item) with a 'Custom Attribute' Name of 'data-item' and use the data Value of the item 'Slug'. This slug is the Webflow Slug and will automatically give a unique data-item attribute of format 'data-item="product-1"', 'data-item="product-2"' etc.

4. Copy the code below and add it to the 'Custom Code' 'Inside <head> tag' of the Collections List Page on the Page in the step above (i.e. Home Page).

5. Update the code 'collectionItem' and add the custom items Class (i.e. var collectionItem = ".products-item";).

6. Update the code 'collectionSlug' and assign the slug of the Collection (i.e. var collectionSlug = "/products/";)

7. Place target divs inside the collection item to house the content loading from the Collection Template page. For each div, add a 'Custom Attribute' Name of 'data-nest="true" and a sequential 'data-nest-target' attribute of format data-nest-target=1, data-nest-target=2 etc. So, the logic is that the content from ID nest-1 will sequentially load into the data-nest-target=1, 2 in 2, 3 in 3 and so on. The beauty here is that you can change the data-nest-target numerical values or move around the target divs to your liking.

8. Publish

This jQuery Load Webflow Nested Collection code will now find the Collections content on the Template page and insert it into the respective target divs in the Collection List.