How can I resolve the issue of not being able to sort items on a CMS page in Webflow when using button sorting instead of a dropdown select, especially when navigating to different pages?

You're encountering an issue with sorting CMS items via button-based filters on a Webflow CMS page, especially when navigating across paginated content. Here’s how to address and resolve that.

1. Understand Webflow’s Limitations

• Native Webflow CMS Collection Lists do not support dynamic sorting via buttons or interaction triggers.
• Webflow’s native pagination resets filters and sorts when switching pages, as it doesn’t maintain state.
• Dropdown sorting is sometimes possible with custom scripts, but buttons need a custom workaround.

2. Use Finsweet’s CMS Library

• Finsweet’s CMS Library (previously “CMS Filter”) allows for advanced CMS manipulation like filtering, sorting, and pagination — including button-based sorting.
• It maintains sort/filter state across paginated pages.

Steps to implement:

• Go to the Finsweet site and use https://www.finsweet.com/cms-library.
• Add their script via Page Settings › Before tag.
• Initialize CMS Sort and Pagination via the library’s fs-cmsfilter attributes.

3. Set Up Buttons with Sort Attributes

• Create your sorting buttons (e.g., “Sort by Price,” “Sort by Date”).
• Add the fs-cmsfilter-sort attribute with the corresponding CMS field name on each button.
• Add the sortable attribute to your collection-list-wrapper.

Example:

• Button: Add fs-cmsfilter-sort="price" to sort by a field called price.
• Collection: Add fs-cmsfilter-element="list" to your list wrapper.

4. Combine Sorting with Pagination

• Add Finsweet pagination by enabling pagination in the CMS settings.
• Wrap your CMS list with a fs-cmsfilter-element="list" container.
• Add pagination components (prev/next or numbered), and assign fs-cmsfilter-element="pagination" attributes accordingly.
• The Finsweet library will maintain your sort state even while navigating between pages.

5. Test Across Pages

• After setup, test if clicking a sorting button then navigating to page 2 preserves the sorting behavior.
• If it's resetting, double-check:
• You’ve added all required fs-cmsfilter attributes.
• Finsweet's cmsfilter.js is correctly loaded and initialized.

Summary

To implement button-based sorting across paginated CMS pages, use Finsweet’s CMS Library filtering and sorting attributes. Webflow doesn’t support this natively, but Finsweet extends this functionality and persists state across pages.