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?
TL;DR
- Replace native Webflow CMS pagination with a Load More solution (e.g., Finsweet Attributes) to keep all items on one page.
- Apply JavaScript-based sorters (like Finsweet, MixItUp, or Isotope) after all items load to enable persistent button-based sorting.
When using button-based sorting on a CMS page in Webflow, sorting may reset or malfunction during pagination because Webflow's default CMS pagination does not track or persist custom sort states.
1. Understand the Limitation
- Webflow CMS collections do not support dynamic sorting changes natively triggered by buttons or external elements.
- Sorting through buttons (e.g., “Sort A-Z” or “Newest First”) usually requires custom JavaScript, which resets when navigating between pages.
- Also, pagination is server-rendered by Webflow, so JavaScript-applied sorting won't persist when users go to page 2, 3, etc.
2. Convert Pagination to Load More
- Replace CMS pagination with Load More (AJAX-style) using tools like Finsweet’s Attributes or Memberstack’s Jetboost:
- These tools keep CMS items on a single page, allowing button-based sorting to apply continuously.
- See Finsweet Attributes: https://finsweet.com/attributes/cms/load
3. Implement Button-Based Sorting with JavaScript
- Use libraries like MixItUp, Isotope, or Finsweet’s Attributes to enable sort buttons that control the visible items.
- Ensure you initialize your JS sorter after all items have loaded, especially with Load More features.
4. Avoid Native Pagination for Sorting Use Cases
- Webflow’s built-in pagination cannot remember sort order across pages.
- JavaScript-applied sorting happens after the page is rendered, which means when the next page loads, it does so with the original server-defined order.
5. Optional: Use Query Parameters (Advanced)
- You can manually create pages that mimic sort options using query parameters (e.g.
?sort=alpha). - Then use JavaScript to detect the parameter and adjust the sort accordingly.
- However, CMS structure and SEO may get more complicated with this approach.
Summary
To enable button-based sorting that works across multiple items without breaking during pagination, avoid Webflow CMS pagination and use a Load More solution like Finsweet Attributes. Then add JavaScript-based sorting (e.g., Finsweet, MixItUp) to control item display based on button clicks.
