How can I use MixitUp Filters on collections with more than 100 items in Webflow?
TL;DR
- Use Finsweet’s CMS Load to dynamically load more than 100 Webflow CMS items on a single page.
- After each load, use MixitUp’s
.append()method to include new items for filtering. - Alternatively, use Finsweet’s CMS Filter for a more seamless filtering solution without the 100-item limit.
Webflow CMS has a 100-item limit per collection list, which can block full filtering using MixitUp for larger collections. Here’s how to work around this limitation while still using MixitUp effectively.
1. Understand the 100-Item Limit
- Webflow’s Collection Lists are capped at 100 items per list instance on a single page.
- MixitUp works client-side, filtering only the items already loaded on the page—so anything beyond the 100-item cap won't be seen or filtered.
2. Use Pagination with Multiple Pages
- Enable pagination in your Collection List to split your 100+ items across several pages.
- MixitUp will only work on the items loaded on the current page.
- Limitation: MixitUp can't filter across multiple pages, so users will need to page through manually.
3. Use “Load More” with Finsweet’s CMS Load
- Use Finsweet’s CMS Load for a “Load More” or infinite scroll behavior.
- This script dynamically loads more items on the same page, effectively bypassing the 100-item limit.
- Once loaded, items can be filtered by MixitUp as they are added to the DOM.
4. Combine Finsweet CMS Load with MixitUp Setup
- Set up Finsweet CMS Load following their documentation.
- After each "Load More" action, trigger MixitUp's
.append()method to register new items. - This ensures MixitUp knows about the newly added items and includes them in filters.
5. Use Finsweet CMS Filter Instead (Optional Alternative)
- Finsweet’s CMS Filter script is purpose-built for large CMS collections and doesn't have MixitUp’s 100-item limitation when used with CMS Load.
- It includes search, filtering, and multi-filtering options, and is fully compatible with Webflow CMS.
Summary
To filter more than 100 Webflow CMS items with MixitUp, you must dynamically load additional items using a solution like Finsweet’s CMS Load, then update MixitUp to recognize them. Alternatively, switching to Finsweet’s CMS Filter may offer a smoother experience for complex filtering needs.
