CMS Combine

Take multiple Collection Lists from different Collections and Combine them to one single Collection List.

Get Started

9,305,842

loads per month

Step #1

Copy the Solution <script> and paste into the <head> of your page

Copy Script

Scroll horizontally to see documentation

Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

LIST

I want each of these

Collection List

elements to be combined to 1 Collection List

See how it works

Add this attribute

Description

Name

fs-cmscombine-element

Value

list

Check live example here

The Collection Lists that will be combined to one List.

Add this element to each Collection List that should be combined.
If 3 lists should be combined, add this attribute to all 3 lists.

All items will be combined to the first Collection List on the page with the fs-cmscombine-element = list attribute.

ITEMS COUNT

I want this

Text Element

to show the total number of items across all combined Collection Lists

See how it works

Add this attribute

Description

Name

fs-cmscombine-element

Value

items-count

This will show the number of total items in all combined lists.

If you have 3 combined lists, each with 20 items, this element will show "60"

how to add cms combine items count attribute

I want to have more than one instance of CMS Combine on the same page

See how it works

Optional

This element is optional to add

You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
‍
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.

Example of this solution:

Attributes that must have instances

Second instance example

Third instance example

fs-cmscombine-element = "list"

fs-cmscombine-element = "list-2"

fs-cmscombine-element = "list-3"

Working examples

See this solution working live in this Webflow project.

Example 1

Two different CMS collections combined

Collection List #1

Capri

Italy

Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

New York

United States

American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

Rome

Italy

The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Rio de Janeiro

Brazil

Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

Collection List #2

How to add an Attribute

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extend Webflow without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn one, learn them all

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customize options without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Both lists combined

Showing 0 items

Capri

Italy

Capri Island

Capri is an island located in the Tyrrhenian Sea off the Sorrento Peninsula.

New York

United States

American Museum of Natural History

Is a natural history museum on the Upper West Side of Manhattan, New York City.

Rome

Italy

The Vatican Museums

The Vatican Museums are the public museums of the Vatican City.

Rio de Janeiro

Brazil

Christ the Redeemer

Christ the Redeemer is an Art Deco statue of Jesus Christ in Rio de Janeiro, Brazil.

How to add an Attribute

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Extend Webflow without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn one, learn them all

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customize options without code

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Copy and paste this example directly on Webflow

Coming soon

Combinations using CMS Combine:

You can combine this Attribute with others to create more complex solutions.

CMS Filter

CMS Load

CMS Combine

Frequently Asked Questions

Everything you need to know about this attributes solution.

Can I combine 2 lists and have them load under?

This is not posible because load under relies on webflow´s native pagination to work

Can I filter 2 collections with CMS filter?

First you have to use CMS combine then you will be able to filter both collections, this cannot be possible without CMS combine

Can the combine attribute work with pagination?

Combine does not work with pagination at the moment

Developer documentation

Check the dev documentation

Next time implement inside Webflow

Use Finsweet Extension

Automated Support

Need more help? Use the Automated Support

Help yourself in minutes. Don't wait hours or days for support.

Sign up for future releases!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

How to add an attribute:

CMS Combine

Copy the Solution <script> and paste into the <head> of your page

Implement in Webflow

Apply attributes to elements on the page

Collection List

Text Element

Working examples

Combinations using CMS Combine:

Filter and load items from 2 different CMS collections.

Filter 2 different collections lists combined.

Sort content by name on load using two different collections lists.

Set up powerful load functionality using 2 different collection lists.

Create posts with 2 different nested collections with more than 5 categories.

Frequently Asked Questions

Developer documentation

Next time implement inside Webflow

Need more help? Use the Automated Support

Sign up for future releases!