How can I create a Category Collection Page in Webflow that only displays articles related to a specific category, without affecting other category pages?
TL;DR
- Create Categories and Articles CMS collections, linking Articles to Categories via a reference field.
- Use the Category Collection Template Page to add a Collection List of Articles filtered to show only those where the article’s category matches the current category.
To create a Category Collection Page in Webflow that only displays articles tied to that specific category, you need to use collection templates and dynamic filtering with the correct CMS structure.
1. Set Up Your CMS Collections
- Create a Categories collection (e.g., fields: Name, Slug).
- Create an Articles collection (e.g., fields: Title, Content, Category Reference).
- In the Articles collection, add a Reference Field to link each article to a specific category.
2. Use a Collection Page for the Category Template
- Webflow automatically generates a Category Collection Page (e.g.,
/categories/category-name) when you create a collection. - Go to the Pages panel and click on the Categories Template Page.
- This template is dynamic—each page corresponds to a single category.
3. Add a Collection List of Articles and Filter It
- Drag a Collection List onto the Category Template Page.
- Connect the list to the Articles collection.
- In the Collection List settings:
- Click Filter.
- Set a filter where Category (reference field) is Equal to Current Category.
This ensures that on each category template (e.g., "Tech", "Lifestyle"), Webflow only displays articles connected to that particular category.
4. Design and Style the Page
- Add any dynamic fields such as the Category title at the top.
- Style the article list as desired; the same layout will apply to all category pages, but the content will change based on the filtered data.
5. Test on Preview or Publish
- Use the Preview mode to test switching between different category pages.
- Each should only show articles associated with that particular category.
Summary
Create a Category Collection Page, use a Reference Field to link articles to categories, and apply a filter that shows articles where the article’s Category equals the current category. This setup keeps each category page unique without affecting others.