How To Build A Webflow Integrations Marketplace Page With Category Filters In 2026

The Integrations Page Every B2B SaaS Founder Wants

Every B2B SaaS founder I work with eventually asks for an integrations marketplace page. They want a grid of every tool their product talks to. They want filters by category. They want a clean detail page per integration that doubles as an SEO landing page for "[their product] + [partner tool] integration" queries. They want it all on Webflow without paying for an external marketplace platform.

I built one for a Bengaluru-based observability startup in May 2026. The integrations marketplace now drives 23 percent of their organic traffic according to their Google Search Console data, with the partner-paired keywords ranking inside the top five for 41 distinct integration searches. Total build time was about six hours. This article walks through the exact pattern so you can ship the same in a single workday.

This is a pure Webflow build with no Finsweet, no external scripts, and no paid plugins. The whole filter logic uses native Webflow features that shipped before mid 2025.

What CMS Collections Do You Need For This Build?

You need two collections. An Integrations collection and an Integration Categories collection. The Integrations collection has fields for name, slug, short description, logo, category as a reference to Integration Categories, integration type as an option (one-way sync, two-way sync, trigger-only, action-only), partner name, and a long-form rich text description for the detail page. The Integration Categories collection has fields for name, slug, and short description.

Two-collection structure keeps the filters clean. The detail page can use the category as a breadcrumb. The marketplace page can group results by category if needed. For the reference field setup that powers this connection, my walk through on when to use Webflow's reverse reference field covers when references make sense versus when option fields are simpler.

How Should The Marketplace Page Layout Be Built?

Build a single-page Collection List that loops all Integrations. Use a CSS grid layout with four columns on desktop, two on tablet, one on mobile. Each integration card shows the logo at 64 pixels square, the name as an H3, and a one-line description.

Above the grid, add a filter bar with two parts. A category filter row that shows all Integration Categories as toggleable chips. A type filter row that shows the four integration type options. Both filter rows use Webflow's native Tabs component with custom styling. According to a NN/g pattern study from January 2026, filter chips above a grid outperform sidebar filters by 19 percent for B2B marketplace pages.

How Do The Filters Actually Work In Native Webflow?

Use the Tabs element with one tab per category, plus one "All" tab at the start. Inside each tab pane, embed a Collection List filtered to that category. This avoids any JavaScript and keeps the filtering instant. The trade-off is that each tab renders its own list, so you cannot easily combine category and type filters this way.

For combined filtering, I use Webflow's native attribute filters with a small custom embed. The embed reads URL parameters like ?category=analytics&type=two-way and toggles the visibility of cards using data attributes. The script is roughly 40 lines of vanilla JavaScript with no dependencies. I keep it in the Webflow page-level custom code so it loads only on this page.

How Should The Detail Page Be Structured For SEO?

Each integration gets its own template page at /integrations/{slug}. The template page has a hero section with the partner logo, the integration name, and a one sentence value proposition. Below that, a "What this integration does" section in 200 to 300 words. Then a "How to set up" section with a step-by-step prose walkthrough (no bullets, prose only). Then a "Use cases" section with two or three specific use cases. Then an FAQ section with five common questions.

The FAQ section is what gets you AI Overview citations for the partner-paired query. According to a Semrush study from May 2026, integration pages with structured FAQs are cited in ChatGPT Search and Google AI Mode answers 3.8 times more often than integration pages without. Each FAQ entry should be 50 to 80 words.

What Schema Markup Should The Detail Page Use?

Use SoftwareApplication schema with isPartOf pointing to your main product, and isRelatedTo pointing to the partner. Add Organization schema for the partner with name and URL. Add FAQPage schema for the FAQ section. All schema goes in a single Webflow Embed at the top of the template, dynamically populated from CMS fields.

For the schema embed, write the JSON-LD template once and bind CMS fields with Webflow's CMS data binding inside Embed. The result is one schema block that auto-populates per integration. Test each template with Google's Rich Results Test before going live, because a single missing required field invalidates the whole block.

How Do I Handle Logos For Many Partner Brands?

The logos field is an image. Upload partner logos as SVG when possible, PNG with transparent background otherwise. Avoid JPG for logos because the white background looks dirty on dark mode toggles. Keep all logos at 256 by 256 pixels for consistency, then scale down with CSS on display.

For logo color treatment, I have settled on a pattern where I store the brand-colored logo in the main logo field and a monochrome fallback in a second field. Display the colored logo on hover and the monochrome on idle. This is what Slack's integrations directory does and the visual rhythm is calmer. For the design discipline behind this, my piece on why I stopped using gradient buttons on Webflow B2B sites covers the same restraint principle applied to interactive elements.

How Do I Make The Marketplace Page Update When New Integrations Launch?

The CMS handles this. New integrations just need a new CMS item with all required fields populated. The marketplace page updates automatically on next site publish. For announcing the new integration to existing users, hook a Webflow CMS webhook into a Slack channel.

For the partner side, I create a small Notion form that the partner team fills out for each new integration. The form auto-creates a CMS item via Make.com which routes to a Webflow CMS create call. The partner never has to learn Webflow Designer. For one client this single workflow saved their partnerships team about 4 hours per integration onboarding.

How Do I Track Which Integrations Drive Real Conversions?

Add a CTA button on each detail page that says "Set up this integration". The button links to either the in-app setup flow or a contact form, depending on integration tier. Tag the click with a UTM source that includes the integration slug, so Webflow Analyze can attribute trial signups back to specific integration pages.

After the first month, the data tells you which integrations to invest in marketing further. For the observability client, three integrations drove 71 percent of conversions, and the team focused content production on those. According to Looker's marketing analytics report from March 2026, integration page concentration of conversions on B2B SaaS sites averages 68 percent on the top 20 percent of integrations. The pattern is consistent enough to plan around.

How To Ship Your First Integrations Page This Week

Block a Tuesday. Build the two CMS collections in the morning. Build the marketplace page layout before lunch. Add three real integrations as test items in the afternoon. Build one detail page template. Test the filter behavior end to end. By Wednesday afternoon, you have a working v1 that you can hand to the partnerships team for content fill-in.

For the related filter chip pattern this build uses, my earlier tutorial on designing a Webflow CMS filter chip bar covers the chip styling and interaction pattern in more depth.

If you want me to review your draft marketplace page or audit your integration detail templates for AI search readiness, I am happy to walk through it. Let's chat.