How to add an attribute:

close icon
Hey! Give us some feedback here.
Filter and Sort

CMS Sort

Create advanced and complex no-code sorting for Webflow CMS Collection List content.

12,738,576

loads per month

CMS Sort
Step #1

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

copy icon
Copy Script
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.

navigator arrow
LIST
I want to sort the content of this

Collection List or Collection List Wrapper

See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
list
copy icon
This is the CMS Collection List that will be sorted.
how to add cms sort list attribute
navigator arrow
SELECT TRIGGER
I want to use a
select icon

Select field

See how it works
see webflow attributes
as my Sort UI element
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
trigger
copy icon
Defines a Select Field element as a sorting trigger.
navigator arrow
Option
DATE
I want to sort by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
FIELD IDENTIFIER
When I interact with this 
select icon

Select field

See how it works
see webflow attributes
choices, I want to sort this

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Select Choice Value
IDENTIFIER-asc
This is how the Sort UI element communicates with the Webflow CMS List.

Add IDENTIFIER-asc or IDENTIFIER-desc to the Select Choice Value.

The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.

Add -asc to the end of the IDENTIFIER to indicate that this Select Choice should be sorting in ascending order
Select Choice Value
IDENTIFIER-desc
Add -desc to the end of the IDENTIFIER to indicate that this Select Choice should be sorting in descending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
BUTTON TRIGGER
I want to use a
button icon

Button, Text Link or Link Block

See how it works
see webflow attributes
as my Sort UI element to create a sort toggle
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
trigger
copy icon
Defines a Button, Text Link or Link Block element as a sorting trigger.

The trigger element must also have the fs-cmssort-field = "IDENTIFIER" attribute with the field identifier that this trigger should sort.
navigator arrow
Option
DATE
I want to sort by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
NUMBER
I want to sort by number
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
number
copy icon
Allows sorting by number.
By default, CMS Sort treats all fields as alphanumeric strings. This attribute is needed to define a numeric field that can contain decimals or negative values like:

25.89
-13
-2.68
100.50
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
Reverse
I want the first
button icon

Button

See how it works
see webflow attributes
click to sort by DESCENDING order
Add this attribute
Description
Name
fs-cmssort-reverse
copy icon
Value
true
copy icon
The first click will trigger desc sorting instead of the default asc.

Useful for lists that come in asc sort order by default with Webflow native sorting options.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
navigator arrow
Option
SORT DIRECTION CLASS
When the
button icon

Button

See how it works
see webflow attributes
is clicked, I want to add ascending
and descending classes to the button
to visually show a change in the sort direction
Add this attribute
Description
Name
fs-cmssort-asc
copy icon
Value
ascending-class
copy icon
Optionally add a class to the button element when the list is sorting in ascending order.

If this attribute is not set, by default the library will add a fs-cmssort_asc CSS class to the button.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
Name
fs-cmssort-desc
copy icon
Value
descending-class
copy icon
Optionally add a class to the button element when the list is sorting in descending order.

If this attribute is not set, by default the library will add a fs-cmssort_desc CSS class to the button.
Where?
Add to the button trigger element with fs-cmssort-element = "trigger"
Useful for visual changes to the button to indicate the list is sorting in a certain direction. For example, having the class flip the direction of an arrow.

Use this feature like CSS. Apply these ascending and descending classes at the list level or the button level.

Apply these attributes to the element with fs-cmssort-element = list to apply these classes to all buttons in the Sort UI.

Apply these attributes to the element with fs-cmssort-field = IDENTIFIER (the button), to apply unique classes to each button.
Initial state of the sort button:
how to add cms sort attribute
Ascending state of the sort button:
how to add cms sort attribute
Descending state of the sort button:
how to add cms sort attribute
navigator arrow
FIELD IDENTIFIER
When I interact with the Button Trigger, I want to sort this
See how it works
see webflow attributes

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
DROPDOWN TRIGGER
I want to use a
form icon

Dropdown

See how it works
see webflow attributes
as my Sort UI element
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
trigger
copy icon
Defines a Dropdown element as a sorting trigger.
navigator arrow
FIELD IDENTIFIER
When I interact with this 

Text Link or Link Block

See how it works
see webflow attributes
inside a Webflow Dropdown, I want to sort this

Text Block, Heading, Paragraph or Text Link

content
Add this attribute
Description
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER-asc
copy icon
This is how the Sort UI element communicates with the Webflow CMS List.

Add IDENTIFIER-asc or IDENTIFIER-desc to the Text Link or Link Block inside the Dropdown.

The IDENTIFIER value connects a Sort UI element to the correct field from Webflow CMS. The IDENTIFIER value is like the name of a CMS field. However, it does not need to match your CMS field. IDENTIFIER values can be whatever you want, but they should be descriptive, like "Name", "Countries", "States", "Cities", etc.

Add -asc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in ascending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER-desc
copy icon
Add -desc to the end of the IDENTIFIER to indicate that this Dropdown option should be sorting in descending order
Name
fs-cmssort-field
copy icon
Value
IDENTIFIER
copy icon
Check live example here
If you are using CMS Filter, the fs-cmsfilter-field = IDENTIFIER will work with all CMS Sort UI elements. You do not have to add fs-cmsfilter-field and fs-cmssort-field to the dynamic Collection Item text.

Add fs-cmssort-field="IDENTIFIER" attribute to text inside the CMS Item template in your CMS list. Add it to the dynamic text element connected to the CMS field of your IDENTIFIER.

Watch video below to understand how this works. The video shows this entire process.
navigator arrow
DROPDOWN LABEL
I want the
form icon

Dropdown

See how it works
see webflow attributes
label text inside the Dropdown Toggle to update with the current sort option
Add this attribute
Description
Name
fs-cmssort-element
copy icon
Value
dropdown-label
copy icon
Add to the text inside the Dropdown Toggle to make the text dynamic with the current active sorting option.

For example, if the user selects "Name (A>Z)" in the Dropdown, the dropdown label element with this attribute will update to "Name (A>Z)".
how to add cms sort label attribute
navigator arrow
Option
DATE
I want to sorty by date
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-type
copy icon
Value
date
copy icon
Allows sorting by date format.
It's just needed for date formats like:

July 4, 2021
July 4, 2021 13:30
07/04/2021
07/04/2021 13:30
December 2021
Where?
Add to the CMS Item dynamic text element with fs-cmssort-field = "IDENTIFIER"
navigator arrow
Option
DURATION
I want to specify the duration of the animation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cmssort-duration
copy icon
Value
100
copy icon
Change duration of the fade animation on the sorted Collection List.

Values are in milliseconds. Default is 100ms.

If you already have fs-cmsfilter-duration applied to the list, this attribute is not needed. Only one duration is needed.
Where?
Add to an element with fs-cmssort-element = "list"

Working examples

See this solution working live in this Webflow project.

Example 1
CMS Sort using a select field
Sort by:
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

October 18, 2021

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

October 25, 2021

The Colosseum
Rome
/
Italy
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

October 18, 2021

Golden Gate Bridge
San Francisco
/
United States
Golden Gate Bridge

The Golden Gate Bridge is a suspension bridge spanning the Golden Gate.

October 25, 2021

Statue of Unity
Gujarat
/
India
Statue of Unity

Is a colossal statue of Indian statesman and independence activist Vallabhbhai Patel.

October 25, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 2
CMS Sort using buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

October 18, 2021

The Colosseum
Rome
/
Italy
The Colosseum

The Colosseum is an oval amphitheater in the center of the city of Rome, Italy.

October 18, 2021

Parque Güell
Barcelona
/
Spain
Parque Güell

Parc Güell is a privatized park system composed of gardens and architectural elements.

October 18, 2021

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

October 25, 2021

Statue of Liberty
New York
/
United States
Statue of Liberty

Is a colossal neoclassical sculpture on Liberty Island in New York Harbor in New York City.

October 25, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new
Example 3
CMS Sort using a dropdown
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Louvre Museum
Paris
/
France
Louvre Museum

It is the home of many of the most known work of arts, including the Mona Lisa.

October 18, 2021

Casa Milà
Barcelona
/
Spain
Casa Milà

Casa Milà or "The stone quarry", a reference to its unconventional rough-hewn appearance.

October 18, 2021

Taj Mahal
Agra
/
India
Taj Mahal

The Taj Mahal is an ivory-white marble mausoleum on the right bank of the river Yamuna in the Indian city of Agra.

October 25, 2021

The Grand Canyon
Arizona
/
United States
The Grand Canyon

The Grand Canyon is a steep-sided canyon carved by the Colorado River in Arizona, United States.

October 25, 2021

Copacabana Beach
Rio de Janeiro
/
Brazil
Copacabana Beach

Copacabana is a bairro (neighbourhood) located in the South Zone of the city of Rio de Janeiro, Brazil.

October 25, 2021

The Vatican Museums
Rome
/
Italy
The Vatican Museums

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

October 25, 2021

Copy and paste accessible CMS Sort components for your project
locked icon
Clone Accessible Components UI KIT
new

Frequently Asked Questions

Everything you need to know about this attributes solution.

Sure they can!

There is a work around using custom Javascript, you should setup the sort attributes and add a sort button with the class ".fs_cmssort_button" that you set style to display:none .


Then add the following script to the footer code.

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

This can be achieved with a little custom JS, basically follow these steps:

1. Add the CMS Sort script after the CMS Combine script

2. Set up the sort attribute using this docs https://www.finsweet.com/attributes/cms-sort/

3. Set the sort button to display:hidden and give it a unique class name (ie. ".fs_cmssort_button"). Add the script below before the </body> tag

<script>
window.onload=function(){
document.querySelector(".fs_cmssort_button").click();
};
</script>

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.