Finsweet-List-Sort

A Collection List renders its items in one fixed order. You set that order in the Element settings panel, and every visitor sees the same sequence after publish. A shopper who wants prices low to high, or a reader who wants the oldest posts first, gets no control. Finsweet List Sort gives visitors that control without rebuilding the list.

One script tag in the site's head code and a handful of custom attributes turn any Webflow CMS Collection List into a visitor-sortable list. Visitors re-order items through on-page controls. The sort happens in the browser by re-ordering elements already on the page, so no server or API call is involved. The same fs-list-field attribute also drives List Filter, so a filtered list sorts without extra markup.

Agency developers building directories and job boards get sort controls through attribute-based setup. The same setup works for property listings. In-house marketers can let readers flip a blog archive between newest and oldest. Ecommerce teams add price and name sorting to product catalog pages. No-code founders can replace a static PDF partner list with a live CMS directory that sorts A to Z.

How to integrate Finsweet List Sort with Webflow

What is Finsweet List Sort? Finsweet List Sort is a client-side JavaScript solution in the Finsweet Attributes library, released under the Apache License 2.0. It sorts content in a CMS or static list by re-ordering DOM elements the page has already rendered. The current version is Attributes V2, which replaced the legacy CMS Sort solution and its fs-cmssort-* attributes with the fs-list-* namespace.

Teams reach for List Sort when a Collection List holds more items than a visitor wants to scan in publish order. The builder of the MyGreen.dk directory gathered 300+ pieces of advice into Webflow and used Finsweet Attributes for filtering, free search, and sorting. The Toyota vehicle database on Made in Webflow lets visitors reorder vehicle entries the same way, though its published markup still runs Finsweet's legacy CMS Sort, CMS Load and CMS Filter scripts rather than the current List solutions.

The Finsweet List Sort-Webflow integration supports two approaches:

• Custom code in head and body tags and custom attributes handle the entire visitor-facing sort experience through visual setup.
• The Webflow Data API and Finsweet Attributes API give you control over sort keys and default sort state, but the Data API side requires server-side development.

Most implementations use the attribute method alone and add the API path for a default sort on load or automated sort-key updates.

Add the Attributes script and apply fs-list attributes

This method covers every documented List Sort feature and needs no JavaScript beyond the Finsweet script tag. It suits designers and developers who build Collection Lists in Webflow and want visitor-controlled sorting on the published site. You need access to head and body code, which requires a Core, Growth, Agency, or Freelancer Workspace or an active Site plan. Finsweet documents where the script tag goes, and the List Sort documentation lists every attribute. Publish the site before testing.

To set up the integration:

1. Go to Site settings > Custom code > Head code and paste the V2 script tag, which is where Finsweet documents it. For a single page, use Page settings > Custom code > Inside <head> tag instead.

<script async type="module"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
  fs-list></script>

2. Open the Add panel, go to Elements > CMS, drag a Collection List onto the page, and connect its Source to a CMS Collection.
3. Select the Collection List, open the Element settings panel, and under Custom attributes click the plus icon. Add fs-list-element with the value list. The custom attributes article walks through the panel.
4. Select the text element inside the Collection Item that holds the sort value. Add fs-list-field with an identifier such as name, date, or price. Repeat for each sortable field. Give each field a different identifier.
5. Add one of the trigger controls described below and give it fs-list-element with the value sort-trigger.
6. Set the sort direction. Select and Dropdown options use values like name-asc and name-desc, while Buttons toggle direction automatically.
7. Publish the site and test the sort on the live URL.

Beyond the required attributes, these optional attributes work with no extra JavaScript:

• fs-list-fieldtype="date" or fs-list-fieldtype="number" switches a field from alphanumeric to date or numeric comparison.
• fs-list-reverse="true" goes on the fs-list-element="list" element and makes a Button's first click sort descending instead of ascending.
• fs-list-ascclass and fs-list-descclass on the sort trigger rename the default is-list-asc and is-list-desc active-state classes.
• fs-list-element="scroll-anchor" on a Div Block scrolls the page to that element after each sort.
• fs-list-element="dropdown-label" on a Text Block inside a Dropdown Toggle updates to show the active sort option.
• fs-list-instance="IDENTIFIER" on a common parent wrapper runs independent List Sort instances on one page.
• fs-list-duration on the list element sets the animation time in milliseconds, while fs-list-sortingclass on the Collection List Wrapper renames the .is-list-sorting class applied during the sort.
• Static lists sort too when you replicate the Collection List structure with div blocks.

Include the script tag once per page even when you combine List Sort with List Filter or List Load. An August 2026 update also lets you paste a full name=value string into the attribute field, and it splits into name and value automatically.

Sort with a Select Field trigger

A course catalog with price and name options can place every choice in one control. Each Select Field option represents one field and direction, which suits lists with several sort fields. Its value combines the field identifier with -asc or -desc.

To configure a Select Field trigger:

1. Add a Form Block near the Collection List and place a Select Field inside it.
2. Add fs-list-element with the value sort-trigger to the Select Field.
3. Add a choice for each sort option and set its value to IDENTIFIER-asc or IDENTIFIER-desc, for example name-asc and date-desc.

The identifier in each value must match an fs-list-field on an element inside the Collection Item.

Sort with Button triggers

The first click sorts ascending and the second click sorts descending. Buttons, Text Links, and Link Blocks are toggles for a single field. This fits table-style headers where each column sorts on its own, such as a price column in a product grid.

To configure a Button trigger:

1. Add a Button, Text Link, or Link Block.
2. Add fs-list-element="sort-trigger" and fs-list-field="price" to the button with the same identifier as the field element.
3. Add fs-list-reverse="true" to the Collection List, not to the button, if the first click should sort descending.
4. Style the is-list-asc and is-list-desc combo classes so visitors can see the active direction.

Add a separate Button for each field you want to expose; each one toggles independently.

Sort with a Dropdown trigger

For full styling control, place the sort options inside a Dropdown Menu. The links carry the field and direction, and the menu contents can be static or driven by CMS.

To configure a Dropdown trigger:

1. Add a Dropdown element and set fs-list-element="sort-trigger" on it.
2. Inside the Dropdown Menu, add a link for each option with fs-list-field="name-asc", fs-list-field="name-desc", and so on.
3. Add a Text Block inside the Dropdown Toggle with fs-list-element="dropdown-label" if you want the toggle to reflect the current choice.

The label text updates to the active option, so visitors see the current sort without opening the menu.

Sort by date or number

List Sort treats every value as a string by default, so dates and numbers sort out of order until you declare a field type. One attribute on the field element switches the comparison. The value in the rendered text must match a supported format.

To sort by date or number:

1. Select the element carrying fs-list-field and add fs-list-fieldtype with the value date or number.
2. For dates, output one of the supported formats: July 4, 2021, July 4, 2021 13:30, 07/04/2021, 07/04/2021 13:30, or December 2021.
3. For numbers, output a plain value such as 25.89, -13, or 100.50. Decimals and negatives are supported.

A currency field like $1,234.56 contains non-numeric characters and sorts incorrectly, so bind a hidden plain-number field and apply fs-list-fieldtype="number" to that element instead.

Sort more than 100 items with List Load

A Collection List renders up to 100 items without pagination, per the dynamic content limits, and List Sort only re-orders items present in the DOM. With native pagination alone, each page renders separately, so a sort applies within one page. List Load loads additional items client-side so the sort can cover them.

To sort across a larger collection:

1. In Element settings > Collection list settings, toggle Paginate items. Finsweet marks native pagination as a mandatory step for List Load.
2. Add fs-list-load to the same fs-list-element="list" element with the mode all, more, infinite, or pagination.
3. Publish and confirm the sort covers the loaded items.

Only the all mode renders the entire collection; the other modes sort whatever has loaded so far. Finsweet recommends Pagination mode over Render All for better performance, especially alongside List Filter, and warns that loading thousands of items at once hurts performance on mobile connections.

Build with the Webflow Data API and the Finsweet Attributes API

The Attributes API is browser JavaScript exposed on window.FinsweetAttributes, so it runs inside the rendered page rather than on a server. The Attributes API lets you set a default sort, hook into the list lifecycle, and read the reactive sorting state of a list instance. The Webflow Data API runs server-side and writes the CMS field values that List Sort reads once the page renders. Use this path when you need a default order on load, a sort after List Load renders, or automated updates to a numeric sort key. The Data API side requires server-side development.

Reference documentation for the integration:

• The general Attributes API documents process, modules, and utils on window.FinsweetAttributes, plus its push, load, and destroy methods.
• The Webflow Data API lists collections and the items inside them, which is where a sort field lives.
• The bulk update endpoint caps a single request at 100 items, which is the ceiling on one sort-key write.
• Webflow webhooks deliver collection_item_created, collection_item_changed, and site_publish events to your endpoint as JSON POST requests.

The two layers share field values through the published HTML and operate independently.

Set a default sort on page load

Once the list module initializes, a short callback can set the sort through a hidden trigger element on the page. The hidden trigger can be a Link Block with the attributes applied, or an HTML snippet inside a Code Embed element. The callback fires once the list module has initialized and hands you every active list instance.

To sort a list on load:

1. Add a hidden trigger inside a Div Block set to display: none, either as a Code Embed or as a Link Block carrying the same attributes:

<div style="display: none">
  <a fs-list-element="sort-trigger" fs-list-field="date" fs-list-fieldtype="date">Date trigger</a>
</div>

2. In the same custom code section, after the Attributes script tag, register a callback and set the sort state:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push(['list', (listInstances) => {
  const [listInstance] = listInstances;
  listInstance.sorting.value.fieldKey = 'date';
  listInstance.sorting.value.direction = 'desc';
}]);

3. Publish and confirm the list loads newest first.

The sorting object is reactive and carries fieldKey, direction (asc or desc), and interacted, so later changes to those properties re-sort the list. Finsweet support documents this pattern in a List Combine forum thread.

Apply a default sort after List Load renders

Items added by List Load or List Combine enter the same sort order through the afterRender hook. The list package README lists the lifecycle keys in order: start, filter, sort, static, pagination, beforeRender, render, afterRender. Each hook callback receives the item array from the previous phase and may return a modified array or a Promise.

To sort after render:

1. Register the callback and attach the hook in the same custom code section:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push(['list', (listInstances) => {
  const [listInstance] = listInstances;
  listInstance.addHook('afterRender', (items) => {
    listInstance.sorting.value.fieldKey = 'date';
    listInstance.sorting.value.direction = 'desc';
  });
}]);

2. Keep the hidden trigger element from the previous sub-method on the page.
3. Publish and load more items to confirm the order holds.

Finsweet support shared this exact approach in a default sort thread. Use listInstance.effect(callback) to run code whenever reactive state changes, and listInstance.triggerHook(key) to fire a phase manually.

Update sort keys with the Data API and webhooks

A rank, score, or price from an external system must be written into a Number or Plain Text CMS field through the Data API, then published so the value appears in the rendered HTML. List Sort picks up the new values on the next page load with no client-side changes.

To automate sort-key updates:

1. Update fields in bulk with PATCH /v2/collections/{collection_id}/items.
2. Publish the changes with POST /v2/collections/{collection_id}/items/publish, or create and publish in one step with POST /v2/collections/{collection_id}/items/live.
3. Subscribe to collection_item_changed with POST /v2/sites/{site_id}/webhooks so your service recomputes derived sort values when editors change items.

Each of those calls runs against the same collection the page already sorts, so nothing on the front end changes. Apply fs-list-fieldtype="number" to the element bound to the new field so it sorts numerically.

What you can build with the Finsweet List Sort Webflow integration

Integrating Finsweet List Sort with Webflow gives visitors control over list order through attribute-based controls and avoids a rebuild in a frontend framework.

• Price-sortable product catalog: Bind a plain price field with fs-list-fieldtype="number" and add a Button trigger with fs-list-field="price" above a product grid. Shoppers flip between low-to-high and high-to-low with one click, and Finsweet confirms Attributes work on Webflow Ecommerce catalogue pages.
• Alphabetical directory with hundreds of entries: Pair List Sort with List Load and List Filter on a name field. The Offboard Tool Directory uses Webflow CMS with Finsweet Attributes for filter, sort, and search across its tool listings.
• Date-sorted blog or resource archive: Apply fs-list-fieldtype="date" to the publish date and offer date-desc and date-asc in a Select Field. Readers surface the newest post or work forward from the oldest, and a hidden trigger sets newest-first as the default.
• Multi-field vehicle or spec database: Expose several fs-list-field identifiers on each Collection Item so visitors sort by model, year, or price. The Toyota example above pairs sorting with a range slider on top of the Client-First framework.

Each of these starts from the same two pieces: a Collection List carrying fs-list-element="list" and one trigger the visitor can reach. Once the list sorts itself, the remaining work is keeping the underlying Collection current, so read how to automate job board listings and let the CMS fill the list you just made sortable.