Most building product manufacturers invest heavily in their product ranges, testing, and technical documentation. Then they put it all behind a website that makes specifiers work too hard to find what they need. The result: architects and M&E engineers give up and move to a competitor whose site makes comparison easier. For a marketing agency for manufacturers working in construction, fixing product filtering and search isn't about aesthetics. It's about making sure your digital presence matches the rigour of your physical products.
We've built dozens of product catalogue sites on Webflow for clients across the construction supply chain. The platform's CMS is genuinely capable when configured properly, but most sites either skip filtering altogether or build it in ways that don't match how specifiers actually narrow down options. This matters because specification decisions happen under time pressure, often with multiple products being compared across different tabs. If your site slows that process down, you're out of the consideration set before the technical conversation even starts.
The typical building products website organises by product category. Insulation. Fixings. Vents. Drainage. That's useful for someone who knows exactly what they're looking for, but specifiers rarely search that way. They're solving a problem: a wet room specification, a fire-rated corridor, a plant room with specific acoustic requirements. They need to filter by application, performance criteria, certification, and sector simultaneously.
Most Webflow builds miss this because they treat the CMS as a simple database rather than a decision-support tool. Collections get set up with basic categories, but no multi-reference fields for sector, application type, or performance specs. Filtering gets bolted on later using a third-party tool that doesn't align with how the data is structured. The result is a slow, clunky experience where users can't combine criteria or have to click through multiple pages to compare products.
The other common failure is search. Native Webflow search is basic: it queries text fields and returns results, but it doesn't rank by relevance or allow filtering within results. That's fine for a blog or a small portfolio site, but not when you've got 200+ products with technical names, application codes, and certification references that specifiers might use interchangeably.
Getting product filtering right starts with how you structure your collections and reference fields. For most building product manufacturers, this means moving beyond a single 'Products' collection and building a relational data model.
Here's what we typically set up:
This structure lets you filter along multiple axes without creating an unmanageable mess of categories. It also keeps your data clean: if you need to update a sector name or add a new certification standard, you're changing one collection item, not editing 40 product entries.
The trick is deciding which attributes become collections and which stay as option fields or plain text. Our rule: if a specifier will want to filter by it, or if it appears across multiple products, it's a collection. If it's product-specific (like a dimension or a colour finish), it stays as a field within the product itself.
Once your data structure is sound, the filtering interface needs to match how people actually narrow down products. For building products, this almost always means starting broad (sector or application) and then layering on performance or compliance filters.
Webflow's native CMS filtering is limited: you can filter a collection list by a single reference field or option field, but combining criteria requires custom code or a third-party solution. For anything beyond basic filtering, we use tools like Finsweet's CMS Filter or Jetboost. Both integrate cleanly with Webflow and support multi-criteria filtering, range sliders for numeric specs, and live updates without page reloads.
Here's how we structure the filter UI for most manufacturer sites:
The layout should feel more like a trade catalogue than an e-commerce filter bar. Specifiers aren't browsing casually. They're methodically eliminating options that don't meet project requirements. Show all active filters clearly. Display result counts as filters are applied. Make it obvious what's been selected and what hasn't.
Native Webflow search is a weak spot for product-heavy sites. It's unweighted, so a keyword match in a blog post ranks the same as a match in a product name. It doesn't handle technical synonyms or product codes well. And it returns a plain list with no filtering or sorting.
For clients where search is critical, we integrate Algolia. It's more work to set up, but the difference is significant: weighted results, typo tolerance, synonym support, and the ability to filter search results by the same taxonomy you use elsewhere on the site. It also handles large catalogues without the performance hit you get from rendering hundreds of CMS items client-side.
The alternative is to lean heavily on filtering and keep search as a secondary tool. This works well if your product taxonomy is strong and your naming is consistent. But if specifiers are likely to search by British Standard codes, NBS references, or application-specific terms ('tanking', 'DPC', 'thermal break'), you need something smarter than Webflow's default.
Most spec work happens on desktop, but site visits increasingly start on mobile: on site, in a supplier's office, or during a quick comparative search between meetings. Your filtering interface has to collapse cleanly without losing functionality.
We usually put filters behind a slide-out panel or modal on mobile, with a sticky 'Filter' button and a clear result count. Active filters stay visible at the top of results, and the filter panel itself should allow apply-and-close behaviour rather than forcing users to back out. The goal is parity of function, not just responsive layout.
Product detail pages need the same attention. Datasheets, technical specs, NBS clauses, and CAD downloads all have to be accessible without excessive scrolling or buried tabs. If a specifier can't get to the information they need in two taps, your mobile experience isn't good enough.
This isn't simple stuff. You can build a basic Webflow site with filtering using templates and third-party tools, but doing it properly for a technical product catalogue requires careful data architecture, custom configuration, and a solid understanding of how specifiers move through a decision process. For a construction marketing agency UK like ours, this is where the value lies: not just in making a site look professional, but in making it perform the job your sales team needs it to do.
If your current site makes specifiers hunt for products, or if you're rebuilding and want filtering that actually works, the structure and tools are available. It's a question of setting them up to match real behaviour, not just ticking a features list.
We work with building product manufacturers and suppliers across the construction supply chain to design and build Webflow sites that do this properly. If you'd like to talk through your product catalogue and how filtering could work better, get in touch.
Trusted by 23+ clients
