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 a Categories CMS Collection and link it to Articles using a Reference field.
- On the Category Collection Page, add a Collection List of Articles and filter it where the article’s Category equals the Current Category to display only relevant articles.
To display articles related to a specific category on a Webflow Category Collection Page without impacting others, you need to use Collection Page filtering and proper CMS structure.
1. Set Up Your CMS Collections
- Create two CMS Collections:
- Categories (e.g., name, slug, etc.)
- Articles (e.g., title, content, and a reference field linking to Categories)
- In the Articles Collection, add a Reference field that links each article to a Category.
2. Use a Collection Page for Categories
- Go to the Pages panel, scroll down to CMS Collections, and click the Categories Collection Page.
- This is a template page, meaning each category gets its own dynamically generated page.
3. Add a Collection List of Articles
- On the Category template page, add a Collection List to display articles.
- Bind the Collection List to the Articles Collection — this will show all articles initially.
4. Filter the Articles by Current Category
- With the Collection List selected, go to the Element Settings panel (gear icon).
- Under Collection List Settings, click Add Filter.
- Set the filter like this:
- Where: Category (Reference field in Articles)
- Equals: Current Category
- This filters the article list to show only items that match the current Category page being viewed.
5. Design It As Needed
- Customize the layout, styling, and information shown in each article card within the Collection List.
- You can also add headings like the current category name using + Add > CMS > Heading and binding it to Current Category Name.
6. Publish and Test
- Publish your site and verify that each Category page only shows articles tied to that specific category.
- Make sure your URLs are correctly structured (e.g., /categories/design, /categories/marketing).
Summary
Create a Categories Collection and link it to Articles via a Reference field. On the Category template page, add an Articles Collection List and filter it by the Current Category. This ensures each Category page only shows relevant articles independently of other category pages.
