How can I make sure that when I create or delete an item in a CMS collection, it instantly updates the collection lists on two different pages in Webflow?

Published on
September 22, 2023

When creating or deleting an item in a CMS collection in Webflow, you may want to ensure that the collection lists on multiple pages are instantly updated. Fortunately, Webflow provides a simple and built-in solution for this. Here's how you can achieve this:

  1. Setup a reference field: In your CMS collection, create a reference field that will be used to connect the items between pages. For example, if you have a "Blog Posts" collection, create a reference field called "Category" that will reference a "Categories" collection.

  2. Create multiple collection lists: On each page where you want to display the collection items, add a Collection List component. Set the Collection to the desired collection and configure the layout and styling options.

  3. Filter the collection lists: To display the filtered collection items on each page, you will need to add a filter to each Collection List. In the "Filter" tab of the settings panel for the Collection List, select the reference field you created earlier and set the filter to match the desired value. For example, if you want to display only blog posts in the "News" category, you would set the filter to "Category equals News".

  4. Repeat the process: Repeat steps 2 and 3 for each page where you want to display the collection items.

By following these steps, whenever you create or delete an item in the CMS collection, Webflow will automatically update the filtered collection lists on the different pages. This ensures that the changes are instantly reflected across the website.

Additional questions:

  1. How do I set up a reference field in a CMS collection in Webflow?
  2. Can I filter collection lists by multiple criteria in Webflow?
  3. Are there any limitations to using CMS collections in Webflow?