Is there a way to nest a CMS list within another CMS list in Webflow, specifically for creating a venue list with upcoming events for each venue?

Published on
September 22, 2023

Yes, it is possible to nest a CMS list within another CMS list in Webflow. This can be useful when creating a venue list with upcoming events for each venue. Here's how you can achieve this in Webflow:

  1. Create two collections: one for the venues and another one for the events.
  2. Add the necessary fields to each collection. For the venues collection, you could include fields like name, address, and description. For the events collection, you could include fields like event name, date, and description.
  3. In the CMS template page for the venues collection, add a dynamic list to display the venues. Configure this list to show the necessary details of each venue using the appropriate CMS fields.
  4. Within the dynamic list, add another dynamic list to display the upcoming events for each venue. Set the filter of this list to show only the events that are related to the current venue being displayed in the outer dynamic list.
  5. Configure the inner dynamic list to show the necessary details of each event using the appropriate CMS fields.

By nesting a CMS list within another CMS list, you can create a venue list with its associated upcoming events. This allows you to display the events specific to each venue dynamically, making it easier to manage and update your website.

Example Markup:

<div class="venue-list">  <!-- Outer dynamic list -->  <div class="venue" data-venue-list="">    <!-- Venue details -->    <h3 class="venue-name" data-venue-name=""></h3>    <p class="venue-address" data-venue-address=""></p>    <!-- Inner dynamic list -->    <ul class="event-list" data-event-list="">      <!-- List item template for events -->      <li class="event" data-event="">        <!-- Event details -->        <h4 class="event-name" data-event-name=""></h4>        <p class="event-date" data-event-date=""></p>      </li>    </ul>  </div></div>

CSS Styling:

/* Style for the outer venue list */.venue-list {  /* Add your styles here */}/* Style for each venue */.venue {  /* Add your styles here */}/* Style for each event */.event {  /* Add your styles here */}

By following these steps, you'll be able to nest a CMS list within another CMS list in Webflow to create a venue list with upcoming events for each venue.

Additional Questions:

  1. How do I create a CMS collection in Webflow?
  2. Can I filter and sort CMS collections in Webflow?
  3. How do I connect a CMS collection to a dynamic list in Webflow?