How to Dynamically Sort a Webflow CMS Collection
Learn how to add dynamic sorting to your Webflow CMS collections with Finsweet CMS Sort: attributes and sort buttons.
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
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
