How to Use CMS Nest Collection Lists in Webflow with Finsweet Attributes

In Wheel flow, while working with the cms nest collection lists, one is most likely to encounter a defaulting setting whereby only five items are displayed in the collection. This restriction can be problematic especially if you have other similar categories or related items that you want to be displayed on the same page.

For example, when a blog post is tagged with multiple categories but, in the Websitebot created on Webflow, they are limited to five, one may ask: How do I display all the categories? Fortunately, there’s a simple workaround to this problem provided by Finsweet in their CMS Nest solution, enabling you to nest collection lists.

In this blog, I will show you how to get started with Finsweet Attributes to turn on the CMS nest collection list in Webflow to showcase all the collection items you want without limitations.

What is CMS Nest?

CMS Nest, an attribute of Finsweet Attributes, enables you to nest one collection list within another in Webflow. This powerful feature helps you bypass Webflow’s limitation of displaying only five items in a nested list, allowing you to showcase all related items such as blog categories, product tags, or related articles, making your site more comprehensive. For more advanced customization, explore how to Create a CMS Modal in Webflow using Finsweet Components, which provides additional ways to enhance your Webflow site’s functionality.

And if you are running a big blog with lots of categories or building an intricate product list, CMS Nest lets you display anything you need, without losing the rest.

Step-by-Step Guide to Implement CMS Nest in Webflow

Now, let’s get to the practical part of turning to CMS Nest by Finsweet in Webflow. In this topic, you will be specifically given the complete procedures when it comes to setting it up.

1. Add the Finsweet CMS Nest Script

Before we can start using CMS Nest, we need to integrate the necessary script from Finsweet. This script will allow Webflow to apply the required attributes to nest collection lists.

• Visit Finsweet CMS Nest documentation and copy the script.
• In Webflow, go to Project Settings or the specific page where you want to implement the nested collection.
• Paste the script into the Head section of the page.

Here’s what the script looks like:

Once added, save your settings.

2. Apply CMS Nest Attributes to the Parent Collection List

Now that the script is active, you can start by applying the necessary CMS Nest attributes to your Webflow project. We’ll first apply these attributes to the Parent Collection List — which in our example will be the Blog Post Collection List.

1. In Webflow, select the parent collection list (Blog Posts in our case).

2. Go to the Settings panel and add the following Custom Attribute:
   • Attribute Name: fs-cmsnest
   • Attribute Value: list

This attribute will designate this list as the parent collection where nested items will appear.

Adding a Link Block to the Parent Collection Item

Next, you need to insert a link block inside the parent collection item. This is essential because Webflow needs a link to navigate users from the blog post to the respective CMS template page.

1. Inside the parent collection item, add a link block that connects to the current blog post.
2. Drag a heading and paragraph inside the link block, ensuring that they are linked to the corresponding CMS fields (such as post title and post content).

This link is crucial for ensuring the dynamic connection between the parent and child collections. Boost your Webflow site’s capabilities with Finsweet’s advanced tools.

3. Set Up the Child Collection List (Categories)

With the parent list set up, it’s time to create and apply the necessary attributes to the Child Collection List — in our case, these will be the categories related to each blog post.

1. Go back to the Webflow Designer and create a new Collection List that represents your categories (or any other related content).
2. Add the following attributes to the child collection list:
   • Attribute Name: fs-cmsnest-source
   • Attribute Value: categories

This attribute tells Webflow that the content within this list (categories) will be dynamically linked and pulled into the parent collection (blog post).

Linking Categories to the Blog Post

To ensure that the categories correctly relate to the blog post, follow these steps:

1. Drag a link block into the child collection list (categories).
2. Ensure that the link block is connected to the current category and links to the appropriate CMS template page (e.g., category template).
3. Inside the link block, add a text element (like the category name) that dynamically displays the category for each blog post.

By doing this, you’ll ensure that the categories are linked and dynamically pulled based on the blog post they are associated with.

Enhance your Webflow site with Finsweet’s innovative features today!

4. Insert a Placeholder for the Nested Collection List

Now we need to add a placeholder div in the parent collection list where the child collection list will be displayed.

1. In the parent collection item (blog post), insert an empty div block. This div will act as the placeholder for the nested child collection list (categories).

2. Apply the following Custom Attributes to this div:
   • Attribute Name: fs-cmsnest-element
   • Attribute Value: target
   • Identifier: categories

This setup tells Webflow that this div is where the nested categories will appear.

5. Add the Child Collection List to the Template Page

Now that the parent and child collections are set up, we need to add the child collection list to the CMS Template Page of the parent collection (in our case, the Blog Post Template Page).

1. Go to the Blog Post Template Page in Webflow.
2. Drag the Child Collection List (categories) into this page.
3. In the Settings panel, assign the correct CMS source (categories) to this collection.
4. Add the required link block that connects each category to its respective template page.
5. Don’t forget to add the necessary attributes to this collection list:
   • Attribute Name: fs-cmsnest-template
   • Attribute Value: categories

This ensures that Webflow correctly associates the categories with the blog post they belong to.

6. Test and Publish

After following the above steps, go ahead and publish your Webflow project. Test it on your live site to ensure that all categories are displayed properly under each blog post. With Finsweet CMS Nest, you should now see all categories dynamically linked and displayed, even if there are more than five items!

Axiabits Services

At Axiabits, we specialize in Webflow customizations like this.

• Custom Webflow Solutions: Tailored strategies to meet your unique design and functionality needs.
• Finsweet CMS Integration: Seamless integration of Finsweet’s CMS Nest and other advanced features.
• Dynamic Content Setup: Expert setup for dynamic filters, search functionalities, and more.
• Performance Optimization: Ensuring your Webflow site runs smoothly and efficiently.
• Ongoing Support: Continuous support and updates to keep your site at its best.

If you need help setting up CMS Nest, or any other dynamic Webflow feature, we’d love to assist you. Book now and let’s get started!

Conclusion

By using the Finsweet CMS Nest solution, you can overcome the limitations of Webflow’s built-in collection lists. Whether you are working with blog categories, product tags, or related items, CMS Nest allows you to display everything seamlessly, providing a richer user experience.

Get started with Finsweet Attributes to unlock powerful Webflow customizations like CMS Nest.

Disclaimer 

This article features affiliate links, which indicates that if you click on any of the links and make a purchase, we may receive a small commission There’s no extra cost to you and it aids in supporting our blog, enabling us to keep delivering valuable content. We solely endorse products or services that we think will benefit our audience.

Frequently Asked Questions

Related Keywords

• How to Integrate Finsweet Attributes in your Webflow site
• How to Create a CMS Modal in Webflow using Finsweet Components
• How to Add a Search Bar to Your Webflow Site Using Finsweet Attributes