How to Dynamically Sort a Webflow CMS Collection

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to let users dynamically sort a Webflow CMS collection.

1. Add the Finsweet CMS Sort script

2. Set up your Collection List

On your Collection List Wrapper, add the fs-cmssort-element="list" attribute. On each CMS field you want to use as a sorting criterion, add fs-cmssort-field="[nom-du-champ]" to the corresponding element.

3. Create the sort buttons

Create buttons or links for each sort option. Add the fs-cmssort-field="[nom-du-champ]:[asc/desc]" attribute to each one. Example: fs-cmssort-field="name:asc" to sort by name A-Z.

4. Style the active state

Finsweet automatically adds the fs-cmssort-active class to the active sort button. Target this class in your Webflow styles to visually show the selected option.

Conclusion

Dynamic sorting improves the experience on catalogs and listings. Use cases:

• Product catalog sortable by price
• Article directory sortable by date
• Member list sortable alphabetically