Webflow Sort
Connect Webflow Sort (Finsweet Attributes) with Webflow to add client-side sorting functionality to Collection Lists, letting visitors reorder content by dates, prices, names, or custom values.
How to integrate Webflow Sort with Webflow
Add Webflow Sort by embedding the Finsweet Attributes CDN script in your site's custom code and applying custom attributes to Collection List elements. Sorting happens entirely in the browser after page load.
Add Webflow Sort with code embeds
Add the Finsweet Attributes script to your project's custom code section in the <head> tag. Then apply attributes to your Collection List components:
- Add the CDN script from the CMS Sort documentation to your site's
<head>tag - Mark your Collection List wrapper with
fs-list-element="list" - Add sort triggers using
fs-list-element="sort-trigger"on buttons or dropdowns - Identify sortable fields with
fs-list-field="IDENTIFIER"on elements containing the data - Specify data types using
fs-list-fieldtype="date"orfs-list-fieldtype="number"for proper sorting
Sort value syntax
Values follow the pattern [field-identifier]-[direction]. Use asc for ascending or desc for descending — for example, price-asc or publish-date-desc.
Active state styling
Add fs-list-ascclass and fs-list-descclass attributes to sort triggers to apply CSS classes when a sort direction is active, providing visual feedback.
Clone the official reference project at finsweet.info/attributes-list-sort to inspect working implementations.
Technical considerations
Collection List limits
Webflow Collection Lists display a maximum of 100 items per page. By default, Webflow Sort operates only on items present in the DOM at page load. For collections exceeding 100 items, use Finsweet's List Load solution with "render all" mode to load all items before sorting.
Pagination
Sorting applies only to items on the current page by default. For cross-page sorting, combine with List Load to render all items first, then apply sorting.
Performance
Sorting happens client-side in milliseconds for typical collection sizes (under 100 items). Performance scales with item count and sort field complexity.
SEO
Search engines index your original HTML content in its default order. Sorting happens in the browser and doesn't affect what search engines see.
What you can build
Integrate Webflow Sort with Webflow to let visitors reorganize CMS content based on their preferences.
- Sortable product catalogs: E-commerce pages where visitors can reorder inventory by price, product name, or release date.
- Dynamic blog archives: Publication libraries that readers can reorder chronologically, alphabetically by title, or by author.
- 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
Webflow Sort works with items present in your Collection List at page load. By default, this is limited to 100 items (Webflow's Collection List maximum). For larger collections, use Finsweet's List Load with "render all" mode to load all items before sorting.
Yes, but you must specify the field type using attributes. Use fs-list-fieldtype="date" for chronological sorting or fs-list-fieldtype="number" for numerical ordering. Without the correct type, numeric values may sort as text strings (e.g., "9" after "10").
Webflow Sort supports single-field sorting per trigger. Each sort action reorganizes the collection based on one field and direction. For multi-level sorting (like category first, then date), consult the CMS Sort documentation for advanced configuration options.
Yes. Webflow Sort works alongside CMS Filter and other Finsweet Attributes. These tools share the same attribute system and can be combined on the same Collection List to provide both filtering and sorting functionality.
Webflow Sort is primarily attribute-based. While some programmatic workarounds exist, there is no formal public JavaScript API with documented methods. For advanced implementations, consult the official documentation or Finsweet support.
Description
Webflow Sort is a Finsweet Attributes library that adds sorting functionality to Webflow Collection Lists. It uses HTML attributes with the fs-list- prefix and a CDN script to enable browser-based sorting without backend configuration.
This integration page is provided for informational and convenience purposes only.
Section Divider Bae
Connect Section Divider Bae, an SVG section divider app, with Webflow to add visual separation between page sections without custom code.
UI Web Kit
Connect UI Web Kit components with Webflow to build consistent design systems and component libraries.
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.
