A guided gear-matching engine for a complex foiling catalog
A catalog too complex for a static product grid
The product catalog spanned foils, masts, tails, boards, and alternates across multiple riding disciplines, skill levels, and rider weights — far more combinations than a shopper could reasonably compare on a standard Webflow collection page.
Recommendations also had to stay aligned with live Webflow CMS content and commerce data, not a separate spreadsheet that could drift out of sync with what was actually for sale.
Score setups, don't just list products
The goal was a Cloudflare Worker endpoint that takes rider inputs and returns a recommended foil, tail, mast, and board, plus alternates, performance scores, and an explanation for the pick — all in a shape Webflow could render directly.
Commerce-ready fields needed to travel with the recommendation, so a rider could move from a suggested setup to a checkout link without a second lookup.
A Cloudflare Worker that scores compatibility and recommends a full setup
The configurator turns a sprawling foiling catalog into a short, guided decision: a few inputs in, one complete and explained setup out.
That reframes the shopping decision from spec comparison to confidence-building, which is exactly where a buyer is likeliest to convert or book a consultation.
Our other projects
The brief was to help riders choose a compatible gear setup — foil, mast, tail, and board — from a catalog too large to compare manually, without turning the Webflow product pages into a maze of cross-referenced spec sheets.
The experience needed to run inside Webflow while pulling from CMS and commerce data that could keep evolving independently of the page.
The product catalog was too complex for a simple static product grid. Riders needed recommendations based on discipline, level, weight, riding priority, and product compatibility — factors a standard filter UI doesn't reason about.
Webflow CMS content and commerce data also had to stay aligned with whatever the recommendation logic produced, so the suggested setup matched what was actually in stock and sellable.
The implementation had to live inside a Webflow page, return complete product cards rather than raw IDs, and preserve checkout reliability by leaving payment flows to the existing commerce stack.
It also couldn't put private API credentials or brittle scoring logic in browser JavaScript, since that would expose business rules and API keys to anyone viewing page source.
SoFlow implemented a Cloudflare Worker API and lightweight Webflow embed assets for the configurator. The endpoint takes rider inputs and returns a recommended foil, tail, mast, and board, along with alternates, performance scores, package context, and plain-language reasoning.
Webflow handles the on-page experience — inputs, layout, and results display — while the Worker owns scoring, data normalization, and the commerce fields needed to move a rider toward checkout.
The Webflow page loads the hosted configurator script and passes along rider inputs. The script calls the Cloudflare Worker, which reads product data shaped from Webflow CMS and the SureCart commerce stack, applies scoring and compatibility rules across foil, mast, tail, and board categories, and returns a structured recommendation for Webflow to render, including commerce fields for checkout.
- Rider-input recommendation endpoint covering discipline, level, weight, and priority
- Combined foil, tail, mast, board, and alternate product output
- Priority-based scoring for freeride, surf, downwind, lightwind, speed, and pump
- Webflow-hosted embed script and styles with no page rebuild required
- Commerce-ready fields — SKU, price, checkout URL, product URL — pulled from the SureCart stack
The configurator turns a complex, multi-part commerce catalog into a guided decision flow, which can shorten the path from browsing to a confident purchase or consultation request.
- Covers six riding disciplines and rider profiles in a single scoring model
- Returns a complete multi-product setup instead of one item at a time
- Keeps scoring logic and credentials out of browser-side code
- Runs from hosted assets embedded directly in the existing Webflow build
Why not just let riders filter the catalog by discipline and skill level?
Filters narrow a list, but they can't tell a rider which foil pairs with which mast and board, or trade off performance for stability at their weight and level. This engine scores full combinations against riding priority — freeride, surf, downwind, lightwind, speed, or pump — so the output is a complete, compatible setup rather than a shorter list to keep comparing.
Why use a Worker instead of only Webflow CMS filters?
A Worker can score combinations across multiple product types at once, normalize CMS and commerce data that lives in more than one system, and return a stable API contract to Webflow — all while keeping scoring logic and any credentials out of the browser.
Does the configurator replace the shop checkout?
No. The configurator's job ends at a recommended setup with commerce-ready fields like SKU, price, and checkout URL. Checkout itself stays owned by the existing SureCart and commerce stack, so payment and order flows aren't touched.
This build proves SoFlow can design custom recommendation engines for Webflow commerce experiences where the buying decision depends on multi-product compatibility and business-specific scoring rather than a simple product list.
Why not just let riders filter the catalog by discipline and skill level?
Filters narrow a list, but they can't tell a rider which foil pairs with which mast and board, or trade off performance for stability at their weight and level. This engine scores full combinations against riding priority — freeride, surf, downwind, lightwind, speed, or pump — so the output is a complete, compatible setup rather than a shorter list to keep comparing.
Why use a Worker instead of only Webflow CMS filters?
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Before the implementation, riders browsing the catalog had to cross-reference specs across separate foil, mast, tail, and board listings with little guidance on which parts actually worked well together for their level and riding style.
After the implementation, the same Webflow page can walk a rider through a few questions and return one complete, explained setup with product context and a direct path to checkout.
A standard Webflow CMS collection can list and filter products, but it has no concept of cross-product compatibility, weighted scoring by riding priority, or graceful fallback when a rider's inputs don't map cleanly to a perfect match.
That logic needs a backend service that can normalize data from Webflow CMS and the SureCart-based commerce stack, then hand back a clean, predictable contract for the frontend to render.
