CMS Collection list updates

<p id="">Today we are excited to announce three powerful CMS Collection list updates that provide more control, flexibility, and reusability when designing with dynamic data. Here’s what’s new:</p><p id=""><strong id="">Unlock greater reusability and empower marketers with Collection list component properties</strong></p><p id="">We know that our customers often need to display the same Collection list with varying content —like a carousel of blog posts with “recent posts” on one page and “related posts” on another. To make this process significantly more efficient and scalable, you can now connect filter, sort, and limit settings on a Collection List directly to component properties —including a brand-new Number property type.</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2560px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2560px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/682622bf52e2a094700d06a5CMS-updates-Collection%20List%20Propertiesinline-31280x720.jpg>" loading="lazy" alt="__wf_reserved_inherit" width="auto" height="auto" id=""></div></figure><p id="">This means you can now reuse the same Collection list component in multiple contexts, each displaying unique filtered, sorted, or limited content based on the properties you define. This eliminates the need to duplicate Collection lists or unlink Collection list components to change their settings&nbsp; —streamlining workflows and unlocking greater reusability when working with CMS data in components.</p><p id="">Additionally, these properties give marketers and content creators full control over the content displayed within these reusable components directly in <a href="<https://help.webflow.com/hc/en-us/articles/33961210206483-Page-building#01JBCZYZYQ14P95MPW716H3N7F>" id="">build mode</a>. And designers won’t need to be a bottleneck for minor content variations —freeing up their time for more creative work.&nbsp;</p><p id=""><a href="<https://help.webflow.com/hc/en-us/articles/33961219350547#h01JV5X5VN30T50E1A8EJECNM73>">Visit this Help Center article</a> to learn more about how to leverage Collection list component properties.</p><p id=""><strong id="">Effortlessly control how CMS content is displayed using curated Collection lists</strong></p><p id="">Curated Collection lists are a new list type and entirely different design experience making it easier than ever to control which Collection list items appear and in what order. Until now, manually curating a Collection list could involve creating dedicated Collection fields or configuring filters and sort order rules —which could be time-consuming and challenging to maintain.&nbsp;</p><div data-rt-embed-type='true'><figure style="max-width: 100%;">

  <div style="position: relative; width: 100%;">

    <!--video (update src to change video)-->

    <video style="width: 100%;" src="<https://dhygzobemt712.cloudfront.net/Web/updates/cms-updates-selected-items.mp4>" muted autoplay loop playsinline></video>

    <!--play/pause button-->

    <a video-playback="button" role="button" href="#" class="bg-video_playback-btn w-inline-block">

      <div video-playback="pause" class="bg-video_playback-btn-state cc-pause">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Pause</title>

            <path d="M8 7H11V17H8zM13 7H16V17H13z"></path>

          </svg>

        </div>

      </div>

      <div video-playback="play" class="bg-video_playback-btn-state cc-play">

        <div class="bg-video_playback-btn-icon w-embed">

          <svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 24 24" fill="currentColor">

            <title>Play</title>

            <path d="M7 6L7 18 17 12z"></path>

          </svg>

        </div>

      </div>

    </a>

  </div>

  <!--caption text

  <figcaption style="margin-top: 1rem;"></figcaption>-->

</figure></div><div data-rt-embed-type='true'><!-- Scripts for inline video functionality -->

<script>

  window.addEventListener('load', async () => {

    // Get all buttons with the attribute 'video-playback="button"'

    const buttons = document.querySelectorAll('a[video-playback="button"]');

​

    // Add click event listeners to each button

    buttons.forEach(button => {

      button.addEventListener('click', (event) => {

        event.preventDefault(); // Prevent default action of the button

​

        // Find the parent element and then the video within the same container

        const video = button.parentNode.querySelector('video');

​

        // Toggle play/pause based on the video's current state

        if (video.paused) {

          video.play();

          button.querySelector('[video-playback="pause"]').style.display = 'block';

          button.querySelector('[video-playback="play"]').style.display = 'none';

        } else {

          video.pause();

          button.querySelector('[video-playback="play"]').style.display = 'block';

          button.querySelector('[video-playback="pause"]').style.display = 'none';

        }

      });

    });

​

    // fallback: show controls if autoplay fails

    let video = document.querySelector('video[muted][autoplay]');

    try {

      await video.play();

    } catch (err) {

      video.controls = true;

    }

  });

​

</script></div><p id="">Now, with curated Collection lists, you can simply search and select items from your Collection —then drag, drop and reorder them into your desired sequence. You can also connect your curated Collection lists to component properties, allowing you to reuse them at scale —like a “featured products” section. This update significantly streamlines a critical workflow when creating bespoke pages with CMS data —making it faster and more efficient than ever to showcase your content exactly as you want.&nbsp;</p><p id=""><a href="<https://help.webflow.com/hc/en-us/articles/41225336636307>" id="">Visit this Help Center article</a> to learn more about how you can get started with Curated Collection lists today.</p><p id=""><strong id="">More flexibly display dynamically-linked content with increased nested Collection list limits&nbsp;</strong></p><p id="">You can now add up to 2 nested Collection lists per page and up to 10 items per nested Collection list—double the current limits. This provides more flexibility when displaying dynamically linked content or organizing content into categories and subcategories. Common examples may include an events page with multiple sessions grouped by different tracks or a customer stories page featuring various case studies grouped by industry or product.&nbsp;</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2560px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2560px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/68262295c4c4b6139123aa5dCMS-updates-Increased%20nested%20Collection%20list%20limitsinline-2_1280x720.jpg>" loading="lazy" alt="__wf_reserved_inherit" width="auto" height="auto" id=""></div></figure><p id="">This is just the beginning. Our team remains heavily invested in unlocking more flexibility when designing with CMS data, including continued CMS nested Collection list scale.&nbsp;</p><p id="">‍<a href="<https://help.webflow.com/hc/en-us/articles/33961268936851-Nest-Collection-lists#make-a-collection-list>" id="">Visit this Help Center article</a> to learn more about how to nest Collection lists.</p>