Mastering Webflow Collection List Settings and CMS Nest

Webflow Collection List settings can be overwhelming, especially when it comes to CMS Nest. To simplify things, let's start with the basics: CMS Nest allows you to nest collections within each other, creating a hierarchical structure.

This structure is useful for organizing complex data, such as product information with variations. For example, if you have a collection of products with different sizes and colors, you can nest the size and color collections within the product collection.

To set up CMS Nest, you need to create a parent collection and then add child collections to it. This is done by dragging and dropping the child collection into the parent collection in the Collection List settings.

In the article, we'll explore more advanced settings, such as filtering and sorting, which can be applied to both parent and child collections.

You can sort your collection lists with Webflow options by selecting the "Collection List" element, going to "Element Settings" (keyboard shortcut: D), and then clicking on "+" to add a sort order in the "Collection List Settings" tab.

There are several sorting options available, including alphabetical, oldest to newest, ascending and descending order, and even a random sorting function.

For text fields, you can sort alphabetically or in reverse alphabetical order, but keep in mind that Webflow only considers the first number in its sorting process.

Sorting for "Switch" fields allows you to sort the list according to whether or not the button is activated and the order of activation.

You can add up the sort orders by adding another one thanks to the "+" button, but the collection list will first respond to the sort order you have inserted first, then to the second and so on.

To customize the sorting of your collection lists, you can add a new field of type "Number" and enter a relevant label field name, such as "Sort Order".

Here's a step-by-step guide to customizing the sorting of your collection lists:

1. Select the collection parameters of the one you want to sort

2. Add a new field ("Add New Field") of type "Number"

3. Enter a relevant label field name, such as "Sort Order"

4. Save the changes

5. For each item in the collection, enter a number

Once you've applied the changes in your collections, you'll need to repeat the sorting steps on the pages.

To do this, go to the page where you want to sort out, select and go to the "Collection List" settings, add a sort order, and select the label field name you have entered (in this case, "Sort Order").

You can sort your collection lists in Webflow with ease. To do this, select the "Collection List" element you've inserted in your page and go to "Element Settings" (keyboard shortcut: D).

There are several sorting options available, including alphabetical, oldest to newest, ascending and descending order, and even a random sorting function. You can sort by different fields in your collection, such as text fields or "Switch" buttons.

For text fields, you can sort alphabetically (A to Z) or in reverse alphabetical order (Z to A). The items in your list will be sorted based on the first number in each item's name. For example, "10 tools" will be sorted above "5 tips" because it starts with the number 1.

If you want to sort your collection lists by a "Switch" field, you can do so by selecting the field and choosing whether to sort by whether the button is activated or not. The sorting will be based on whether the button is on or off, and the order of activation.

You can cumulate the sort orders of your collection lists by adding multiple sort orders. Just click the "+" button to add a new sort order, and the collection list will first respond to the first sort order, then the second, and so on. For example, you can sort your blog posts by whether they are "Featured" and then randomly.

If the available sorting orders in Webflow aren't what you need, you can customize the sorting of your collection lists. To do this, add a new field of type "Number" to your collection and enter a relevant label field name, such as "Sort Order". Then, for each item in the collection, enter a number. Finally, go to the page where you want to sort and select the "Collection List" settings, add a sort order, and select the label field name you entered.

Here's a quick summary of the steps to remove sort orders from your collection lists:

* Click on the bin icon to the right of the sort order you want to delete.

CMS collections in Webflow can be connected to components like Blog 34 and Blog 66, allowing you to display your native CMS collection elements with custom styling.

To connect your CMS collection to a component, you'll need to add a Collection list element, connect it to your CMS collection, and map the classes from the component into their respective Collection list elements. This process is similar to copying and pasting classes like blog34_list-wrapper into Collection List Wrapper.

You may need to manually set Flex or Grid on the Collection list because sometimes these properties don't get inherited correctly in Webflow.

Here's a step-by-step guide to connecting your CMS collection to a component:

By following these steps, you can easily connect your CMS collection to a component and display your native CMS collection elements with custom styling.

CMS is a powerful tool that helps you manage and display content on your website. It's like a digital filing cabinet where you can store and organize your content in a way that's easy to access and use.

CMS Nest, part of Finsweet Attributes, allows you to nest one collection list within another. This feature helps you display all related items, such as blog categories or product tags, seamlessly.

With a CMS, you can create custom lists of content that are tailored to your specific needs. This can include anything from blog posts to product information.

CMS Nest helps you overcome Webflow's default limit of five items per nested list. This means you can display more related items without having to compromise on design or functionality.

By using a CMS, you can save time and effort by streamlining your content management process.

CMS Nest is a powerful feature that allows you to nest one collection list within another in Webflow.

CMS Nest is part of Finsweet Attributes and helps you bypass Webflow's limitation of displaying only five items in a nested list.

By using CMS Nest, you can showcase all related items such as blog categories, product tags, or related articles, making your site more comprehensive.

Here are some key benefits of using CMS Nest:

CMS Nest is essential for big blogs with lots of categories or intricate product lists, as it lets you display anything you need without losing the rest.