Is there a way to create a "All products" page in Webflow that pulls in products from different CMS Collections and orders them by creation date, without merging all the collections into one?

Published on
September 22, 2023

Yes, it is possible to create an "All products" page in Webflow that pulls in products from different CMS Collections and orders them by creation date without merging the collections into one. Here's how you can achieve this:

  1. Create CMS Collections for each product type:
  • Set up a separate CMS Collection for each product type you want to display on the "All products" page (e.g., shirts, pants, accessories).
  • Make sure each collection has a field for the creation date.
  1. Create a new CMS Collection List:
  • On the page where you want to display the "All products" list, drag and drop a Collection List element.
  • Select the first CMS Collection you want to display (e.g., shirts).
  • Adjust the layout and design of the Collection List according to your preferences.
  1. Add a Reference field to link all the collections:
  • In each CMS Collection, create a Reference field called "Product Type" or similar.
  • In the field settings, choose the other CMS Collections that you want to include (e.g., for shirts, select pants and accessories).
  • This will allow you to connect all the collections together.
  1. Filter and sort the data:
  • Open the Collection List settings and select the first CMS Collection again.
  • Under the "Filter & Sort" tab, select "Reference" and choose the "Product Type" field you created.
  • Set the "Equals" option to the current CMS Collection (e.g., for shirts, select shirts).
  • Enable the "Sort by" option and select the field for creation date.
  • Choose the sorting order (e.g., descending) to display the latest products first.
  1. Repeat step 4 for other CMS Collections:
  • Add another Collection List element for the next CMS Collection you want to display (e.g., pants).
  • Repeat the steps to filter and sort the data based on the "Product Type" field and creation date.
  • Customize the styling to maintain consistency across all Collection List elements.
  1. Repeat step 5 for any additional CMS Collections:
  • Go through the process of adding Collection List elements, filtering, and sorting for any remaining CMS Collections you want to include.
  • Make sure to adjust the "Product Type" filter accordingly for each Collection List element.

By following these steps, you can create an "All products" page in Webflow that pulls in products from different CMS Collections and orders them by creation date without merging all the collections into one. This allows you to maintain the integrity and separation of your CMS Collections while presenting a unified view of all products on a single page.

Additional Questions:

  1. How do I create a "Latest News" page in Webflow that pulls in news articles from different CMS Collections?
  2. Can I sort CMS Collection items by a custom field instead of the creation date?
  3. Is it possible to filter CMS Collection items on Webflow based on multiple criteria?