How can I filter and display specific types of houses in a certain location when using CMS data in Webflow?
TL;DR
- Structure your CMS with fields for house type and location, using Option or Reference fields as needed.
- Add a Collection List to your page, connect it to the Houses CMS Collection, and apply filters for desired house type and location to display matching items.
To filter and display specific types of houses in a certain location using CMS data in Webflow, you'll need to use Collection Lists that reference CMS fields with filters applied.
1. Structure Your CMS Properly
- In your Houses CMS Collection, include relevant fields like:
- House Type (Plain Text or Option field – e.g., Apartment, Villa)
- Location (Plain Text, Option, or Reference field)
- If you're using Reference fields for Location or House Type, ensure those referenced Collections are properly populated.
2. Add a Collection List to Your Page
- Drag a Collection List from the Add panel into your page.
- Connect it to your Houses CMS Collection.
3. Apply CMS Filters to Limit the Data
- Select the Collection List Wrapper.
- In the Settings panel (gear icon), go to the Filter section.
- Add filters such as:
- House Type is equal to “Villa”
- Location is equal to “New York”
- You can add multiple filters for combinations (e.g., villas in New York).
4. Display the Filtered Data
- Design how each house item will appear inside the Collection List using Image, Text Block, and Link Block.
- Bind each element to the respective CMS fields (e.g., house name, image, etc.).
5. Optional: Use Conditional Visibility Inside Items
- If displaying multiple house types, use Conditional Visibility settings on specific elements (e.g., show a label only when type = "Apartment").
Summary
Create structured CMS fields for house type and location, then use Collection List filters to display only the relevant homes. This allows you to dynamically show specific types of houses in any target location.