Finsweet List Sort
Finsweet List Sort adds client-side sorting functionality to Webflow Collection Lists without backend configuration.
How to integrate Finsweet List Sort with Webflow
Webflow Collection Lists display items in a fixed order. Visitors can't reorganize content based on their preferences. List Sort lets visitors reorganize collection items by price, date, name, or any other field.
This integration uses Code Embed elements and custom attributes applied to Collection List components. Add the Finsweet Attributes CDN script through custom code in the head tag and apply attributes to your Collection List. The sorting happens in the browser after page load.
Add List Sort with code embeds
List Sort runs in the browser after page load. Visitors can sort collection items by text, numbers, or dates using buttons, dropdowns, or custom controls. The official documentation provides the CDN script and complete attribute reference.
Add the Finsweet Attributes script to your project's custom code section in the <head> tag. Then add the fs-cmssort- attributes to your Collection List wrapper, configure sort triggers, and mark the fields you want to sort by. The library detects these attributes on page load and activates sorting.
Implementation steps:
- Install the CDN script from the CMS Sort documentation in your site's
<head>tag - Mark your Collection List wrapper with
fs-cmssort-element="list"to identify the container - Add sort triggers using buttons, select fields, or dropdowns as your sort controls
- Identify sortable fields with
fs-cmssort-field="IDENTIFIER"on elements containing the data - Test with the live demo site or clone the reference project
The official documentation includes complete attribute specifications, sort value syntax, and active state styling options.
Technical considerations
Collection List limits:
Webflow Collection Lists display a maximum of 100 items per page. List Sort works only on items present in the DOM at page load. It cannot sort items beyond this limit. For collections exceeding 100 items, use pagination, CMS Filter to reduce visible items, or the Webflow CMS API to structure content before it reaches the browser.
Browser compatibility:
List Sort uses modern JavaScript and runs in current browsers. The client-side library requires JavaScript enabled in the visitor's browser. Check the official documentation for specific browser requirements.
Performance:
Sorting happens client-side in milliseconds for typical collection sizes under 100 items. Performance scales with the number of items and complexity of sort fields. The CDN-hosted script loads asynchronously to minimize impact on page load.
Pagination interactions:
List Sort works on items rendered at page load. If you use pagination with Collection Lists, sorting applies only to items on the current page, not across all pages. Combine with CMS Filter for filtering and sorting workflows across multiple pages.
What you can build
Integrating List Sort with Webflow lets you build dynamic collection displays where visitors control content organization.
- Sortable product catalogs: E-commerce pages where visitors reorganize inventory by price, product name, or release date
- Dynamic blog archives: Publication libraries that readers reorder chronologically, alphabetically by title, or by author name
- Filterable team directories: Staff pages that reorganize by department, seniority level, or alphabetical order
- Organized portfolio galleries: Project showcases that sort by completion date, client name, or project category
Frequently asked questions
Description
Finsweet List Sort is a client-side JavaScript library that adds sorting functionality to Webflow Collection Lists.
This integration page is provided for informational and convenience purposes only.
ThemeForest
Connect ThemeForest with Webflow to access third-party templates and manually recreate designs in [Webflow Designer](https://university.webflow.com/lesson/intro-to-the-designer).
PowerImporter
PowerImporter automtes content updates that can create bottlenecks when marketing teams manage information in Airtable or spreadsheets but developers must manually transfer data to Webflow CMS.
Rive
Add interactive, state-driven animations directly to your Webflow sites with native Rive support. Upload .riv files through the Assets panel and control animation states using Webflow Interactions without writing integration code.
All in One Accessibility
Connect All in One Accessibility with Webflow to add 70+ accessibility features that help your site meet ADA, WCAG, and Section 508 requirements without custom development.
Sage
Connect Sage accounting software with Webflow to display financial data, sync customer information, or automate billing workflows on your website. This integration requires third-party tools or custom API development since Sage doesn't offer a native Webflow connection.
Flowstar Tabs
Connect Flowstar Tabs with Webflow to organize content in customizable horizontal or vertical tabbed layouts.
Typed.js
Typed.js brings animated typing effects to your Webflow projects. Create engaging headlines that type, delete, and cycle through messages automatically — perfect for hero sections, testimonials, and dynamic call-to-actions that capture visitor attention without complex coding.
Typed.js
Enter in any text string, and watch it type at the speed you've set.
Sweet Text by Finsweet
Connect Sweet Text with Webflow to add advanced text styling and typography controls to your Rich Text content.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
