In Webflow, how can I combine two CMS collections (Blog & Success Stories) to show both on my home page instead of just one?

Published on
September 22, 2023

To combine two CMS collections, such as the Blog and Success Stories, and display them both on your home page in Webflow, you can follow these steps:

  1. Create a new Collection List: Start by dragging and dropping a Collection List component onto your home page. This component allows you to dynamically display multiple items from a CMS collection.

  2. Set up the Collection List: In the Collection List settings panel, select the collection you want to display. This can be either the Blog or the Success Stories collection.

  3. Add filters: By default, the Collection List will display all items from the selected collection. To combine the two collections, you need to add filters. Click on the "Add Filter" button in the Collection List settings panel and select the second collection (e.g., if you started with the Blog collection, add a filter for the Success Stories collection).

  4. Configure filters: Configure the filters to match the requirements of your specific design. This might involve filtering by a specific category, tag, or other field that both collections have in common. For example, if both collections have a "Featured" boolean field, you could set the filter to display only items that are marked as featured.

  5. Style your Collection List: Customize the appearance of your Collection List to match the design of your home page. This can be done using the Webflow Designer, where you have full control over the layout, typography, and styles.

  6. Repeat steps for the other collection: If you started with the Blog collection, repeat steps 1-5 for the Success Stories collection. Add a second Collection List to your home page and set up the same filters to combine the two collections.

  7. Place the Collection Lists on your home page: Position the Collection Lists in the desired locations on your home page, adjusting the layout as needed. You can use other Webflow components, like columns or custom grids, to create the desired structure.

  8. Preview and publish: Preview your home page to see the combined results of the two CMS collections. Make any necessary adjustments and then publish your changes to make them live on your website.

By following these steps, you can easily combine two CMS collections, like the Blog and Success Stories, and display them both on your home page in Webflow, creating a unified and dynamic content experience for your visitors.

Additional Questions:

  1. How do I add filters to a Collection List in Webflow?
  2. Can I combine multiple CMS collections in Webflow?
  3. Is it possible to display multiple CMS collections on a single page in Webflow?