Combined List
Collection List 1
Collection List 2
Collection Item
Combine
Combine Collection Items from multiple CMS Dynamic Lists into one single Collection List
Scroll
Scroll
Scroll
Scroll
Scroll
Use cases
Have more than 100 Collection Items in a single Collection List
You need to display more than 100 Collection Item in a single Collection List. This is extra helpful when you are running filters on a Collection List and need to prevent white space created from having multiple collection lists.
Put Collection Items from different CMS Collections in the same Collection List
For example you have CMS Collections for “Case Studies”, “Testimonials”, and “Blog Posts”. You want users to be able to filter between all 3 Collection Lists in a single filter system.
How to use it
Paste before </body> tag of the page you're working with.
<!-- F'in sweet CMS Library for Webflow -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list')
// run the combine Library component on your instance
customBlogPosts.combine()
})();
</script>
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list')
// run the combine Library component on your instance
customBlogPosts.combine()
})();
</script>
Code explanation
customBlogPosts
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
Important: Make sure all the Collection Lists that you want to combine have the same Collection List class (.blog-posts-list in our example).
Combine video docs
Docs explainer
Open video modal and follow the explanation above
beginner tutorial
Video walkthrough!
Check out Clonable "How To"
Learn, explore, inspire yourself, clone, and implement