AttRibutes
List Combine
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Combine

Combine multiple list into a single list.

Watch a quick tutorial

List Combine • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required and Optional attributes

Target List

Add to the colletions that should be combined, list with the same instance will be grouped together

fs-list-element
=
"
list
"
fs-list-combine
=
"
IDENTIFIER
"

Combined lists

Add to Lists to combine into the Target List

fs-list-element
=
"
list
"
fs-list-instance
=
"
IDENTIFIER
"

Items count

Add to text element that will show the item count

fs-list-element
=
"
items-count
"
fs-list-instance
=
"
IDENTIFIER
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Add these required attributes to the elements

List

This is the target list, the one other lists combine into.
fs-list-element
=
"
list
"
fs-list-combine
=
"
IDENTIFIER
"

Apply these mandatory attributes to the Collection List that will host the content from other lists with the attribute fs-list-instance="IDENTIFIER", when the IDENTIFIER value matches.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add this attribute:
Name
fs-list-combine
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-combine = "authors"
Add it to those type(s) of element(s):
Collection List
NOTE

In case you want to use non-CMS content, replicate the CMS structure using div blocks as follows:

Learn everything about using a non-CMS list with the List Solutions on How to use List Solutions on static lists.

Combine List(s)

List(s) to combine into the target one.
fs-list-element
=
"
list
"
fs-list-instance
=
"
IDENTIFIER
"

Apply these attributes to the Collection List(s) that will be combined into the target list, the one with fs-list-combine="IDENTIFIER".

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-instance = "authors"
Add it to those type(s) of element(s):
Collection List
EXAMPLE

If you're combining 3 lists of blog posts into one, add fs-list-element="list" and fs-list-combine="posts" to the target one — the one into which the content of the two others will be added — and fs-list-instance="posts" to the other lists.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

elements

Items count

Show how many items the combined list contains.
fs-list-element
=
"
items-count
"
fs-list-instance
=
"
IDENTIFIER
"

The element tagged with these attributes will display the total number of items of the target list sharing the same IDENTIFIER, which will reflect the total number of items in the combined lists.

Add this attribute:
Name
fs-list-element
Copy
Value
items-count
Copy
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Example:
fs-list-instance = "posts"
Add it to those type(s) of element(s):
Text Block
EXAMPLE

For instance, if there are 3 combined lists, each containing 20 items, this element will display "60".

Still need help?

Get Support