Can Webflow combine multiple CMS Collections into one using Finsweet's Attributes feature for sorting?
TL;DR
- Use Finsweet’s CMS Combine Attributes to merge multiple Webflow Collection Lists into one unified list on the front-end using specific data attributes.
- Apply Finsweet’s CMS Sort Attributes on the combined wrapper to enable sorting by fields like date or name, ensuring all lists share the same structure.
Webflow does not natively support combining multiple CMS Collections into one, but you can dynamically display items from multiple collections using Finsweet's Attributes (CMS Combine) feature along with Finsweet’s powerful sorting and filtering tools.
1. Understand Finsweet's CMS Combine Feature
- Finsweet’s Attributes CMS Combine lets you merge multiple CMS Collection Lists on the front-end so they display as a single list.
- This is purely client-side. The merge happens after page load via JavaScript, not within Webflow’s native CMS.
2. Requirements to Use Attributes CMS Combine
- Each CMS Collection must be placed inside a Webflow Collection List on your page.
- You must assign specific data attributes (e.g.,
fs-cmscombine="list",fs-cmscombine-element="item") to instruct Finsweet on which elements to merge. - All item structures need to be identical across the different lists for consistent display and sorting.
3. Sorting Merged Lists with Finsweet Attributes
- After combining the CMS lists, you can use Finsweet’s CMS Sort attribute to sort the merged results.
- Add
fs-cmssort="value"to the parent container and usefs-cmssort-field="FIELD_NAME"to indicate which field to use for sorting (e.g., date, name). - Sorting will apply across the merged dataset, treating it as one unified list.
4. Limitations to Consider
- Since combining occurs on the front-end, SEO or site indexing won’t treat it as one unified list—search engines see separate lists.
- Pagination and filtering need special implementation if you're combining lists dynamically.
- CMS item limits (100 items per list on static pages) still apply per Collection List used.
5. Implementing the Setup
- Place each CMS Collection List on your page and wrap them in a common container.
- Apply required Finsweet attributes:
- Container:
fs-cmscombine="list" - Items:
fs-cmscombine-element="item" - Then add sorting attributes over the entire wrapper:
- Wrapper:
fs-cmssort="list" - Items:
fs-cmssort-element="item" - Field to sort:
fs-cmssort-field="FIELD_NAME"
Refer to Finsweet's CMS Combine docs and CMS Sort docs for implementation examples.
Summary
You can combine multiple Webflow CMS Collections into one visual list using Finsweet’s CMS Combine Attributes and then sort them using CMS Sort Attributes. All of this occurs on the front-end and requires consistent structure and proper data attributes for it to work smoothly.
