How can I use MixitUp Filters on collections with more than 100 items in Webflow?
TL;DR
- Use Finsweet CMS Load to dynamically load all Webflow CMS items into the DOM beyond the 100-item limit.
- Initialize or re-initialize MixItUp after all items are loaded to enable full filtering functionality.
To use MixItUp filters on a Webflow CMS collection with more than 100 items, you'll need to use Webflow's pagination workaround along with MixItUp and potentially Webflow API or third-party tools. Webflow displays only 100 items per Collection List, so you'll need to combine data loading and filtering manually or via script.
1. Understand the 100-Item CMS Limit
- Webflow limits each Collection List to 100 items per page.
- Even using pagination, MixItUp can only filter what’s currently in the DOM—it can’t access off-page items by default.
2. Use Load More (Pagination) Strategy
- Enable pagination or use a “Load More” interaction to pull in additional items.
- Use the Finsweet CMS Load tool (https://www.finsweet.com/cms-library/load) to load all CMS items into the DOM dynamically.
- When all items are loaded into the DOM, MixItUp can filter them as expected.
3. Install Finsweet CMS Load
- Go to the Finsweet CMS Library website.
- Select the Load option and follow instructions to integrate it into your Webflow project.
- Assign correct
fs-cmsloadattributes as directed: fs-cmsload-element="list"on the Collection List Wrapper.fs-cmsload-element="button"on your “Load More” button.
4. Combine With MixItUp
- After loading all items via Finsweet CMS Load, MixItUp will be able to filter them.
- Init MixItUp after all items are loaded to ensure it includes new DOM elements.
- You may need to re-instantiate or refresh MixItUp once all pagination is complete.
5. Implement Re-Initialization (if needed)
- If MixItUp doesn’t automatically respond to newly loaded items:
- Use
mixitup(container).filter('all')or destroy/re-init the instance when loading is done. - Ensure this happens after the last page is loaded via Finsweet's
fs-cmsloadcallbacks.
Summary
To use MixItUp on Webflow CMS items exceeding 100, dynamically load all items using tools like Finsweet CMS Load, then initialize MixItUp after all items are present in the DOM. This allows full filtering functionality beyond Webflow’s native 100-item limit.