How can I sort scores from highest to lowest or vice versa on a single CMS page in Webflow?
TL;DR
- Use Webflow’s native sort settings for static sorting of Collection Lists by score (ascending or descending).
- For dynamic, user-controlled sorting, add custom JavaScript to read score values and reorder items on the page.
- Alternatively, create multiple pre-sorted Collection Lists and toggle their visibility using buttons or tabs as a no-code solution.
To sort dynamic scores from highest to lowest (or vice versa) on a single CMS page in Webflow, you'll need to use either built-in Collection List sorting (for static content) or implement custom solutions with JavaScript for dynamic filtering. Here's how:
1. Use Webflow's Native Sort (Only for Static Collection Lists)
- Add a Collection List to your CMS page.
- In the Collection List Settings, select the source Collection (e.g., “Leaderboard” or “Reviews”).
- Under Sort Order, choose the Score field.
- For high to low: Sort by Score → Descending
- For low to high: Sort by Score → Ascending
- This method only works for Collection Lists placed directly on static pages or CMS Template Pages. It won’t dynamically change based on user interaction.
2. To Enable User-Controlled Sorting (Advanced – Requires Custom Code)
Webflow does not support in-browser sorting of a single Collection List via the Designer, so a custom solution is required:
- Use a Collection List to render all CMS items with a Score.
- Add dropdowns or buttons for sort options (e.g., “High to Low” / “Low to High”).
- Add custom JavaScript using jQuery or vanilla JS to:
- Capture the collection items.
- Read the score values (e.g., from
data-scoreattributes). - Sort and re-render the items on the page based on score.
- Example structure: Assign each
.collection-itemadata-scoreattribute so JavaScript can read and sort them accordingly.
3. Consider CMS Workarounds via Multiple Lists
If coding isn’t an option and interaction isn’t required:
- Create two separate Collection Lists on the same page:
- One sorted ascending
- One sorted descending
- Use buttons or tabs to toggle visibility between them.
- This mimics dynamic sorting without custom code, though it’s less scalable.
Summary
Webflow CMS supports static sorting of Collection Lists using native sort settings. For user-triggered dynamic sorting, you’ll need custom JavaScript to sort DOM elements by score. Alternatively, use multiple pre-sorted lists and toggle their visibility for a no-code workaround.