What is a Finsweet work-around for multiple nested CMS lists in Webflow?

Published on
September 22, 2023

A Finsweet work-around for multiple nested CMS lists in Webflow involves utilizing the F'n Serial Scroll feature provided by Finsweet. This allows you to display multiple nested CMS lists in a single page section without the need for complex custom code or workarounds.

Here is a step-by-step guide on how to implement the Finsweet work-around for multiple nested CMS lists in Webflow:

  1. Set up your CMS collections: Create the necessary CMS collections and fields for your content. Make sure to relate the collections, creating nested relationships.

  2. Install and set up F'n Serial Scroll: Visit the Finsweet website and follow the instructions to install the F'n Serial Scroll add-on. This will add additional functionality to your Webflow project.

  3. Create a new page section: In Webflow, add a new section to your page where you want to display the nested CMS lists. Give the section an appropriate class name to target it later.

  4. Add a collection list: Inside the newly created section, add a Collection List element. This will be the container for your nested lists.

  5. Configure the collection list settings: In the Collection List settings panel, select the parent collection that contains the nested relationships. Set the layout for the list and design it according to your requirements.

  6. Add nested collection lists: Inside the Collection List, add multiple Collection List elements based on the number of nested relationships you have. Each nested Collection List will represent a specific level in the hierarchy of your CMS collections.

  7. Configure nested collection list settings: For each nested Collection List, select the appropriate collection and set up the list layout and design.

  8. Add dynamic list items: Inside each nested Collection List, add the necessary dynamic list items and style them accordingly.

  9. Enable F'n Serial Scroll: After setting up the nested CMS lists, select the main section containing the Collection List elements and enable the F'n Serial Scroll feature by adding the appropriate class, which can be found on the Finsweet website documentation.

  10. Customize the F'n Serial Scroll settings: Adjust the F'n Serial Scroll settings to modify the scroll behavior, animation, and other options as per your design preferences.

  11. Publish and test: Finally, publish your website and test the functionality of the nested CMS lists with the F'n Serial Scroll feature. Make sure to check the responsiveness and appearance on different devices.

By following these steps, you can create a Finsweet work-around for multiple nested CMS lists in Webflow, allowing you to display complex nested content relationships in a user-friendly and visually appealing manner.

Additional Questions:

  1. How can I display multiple nested CMS lists in Webflow?
  2. Is there a workaround for displaying hierarchical CMS content in Webflow?
  3. What is the F'n Serial Scroll feature by Finsweet and how can it be used in Webflow?