Three boards, plus masts, wings and accessories, sold through a themed storefront that presented them as a catalogue of interchangeable items.
E-commerce · Headless Shopify
LiftFoils
A premium electric hydrofoil store whose traffic doubled after a headless rebuild.
- Product
- Lift Foils — headless commerce for electric hydrofoils
- Role
- Senior frontend engineer, contract
- Scope
- Next.js App Router on the Shopify Storefront API, guided configurator, Stripe checkout
The tension
Nobody buys a hydrofoil from a product grid.
The wrong combination is an expensive mistake, especially for a beginner. So the job was not to list the range but to narrow it before showing a price.
Success looked like
A rider reaching the right board for their level without booking a consultation first — and site traffic doubling after the migration.
The constraint
Shopify still had to own inventory, orders and fulfilment. The rebuild could change the buying experience but not the system of record behind it.
2×traffic after migration
Measured after the headless rebuild replaced the themed storefront.
The product story
Narrow the range before quoting a price.
One promise
One board. Any session.
The landing view leads on the range's single claim rather than on a product, so the first decision is whether this is for you, not which SKU.
Narrow first
Configured on a phone, by the water.
The configurator and cart reflow to one column while keeping the level filter reachable, so the narrowing step survives the small screen.
Three, not thirty
Each model exists for a reason.
LIFT5 F, LIFT5 and LIFTX are presented as answers to different riders rather than as tiers, with the setup-time comparison doing the arguing.
Walkthrough
The storefront in motion
Recorded from the live site.
The trust test
The happy path is only half the product.
A configuration is not purchasable
Availability comes from Shopify at request time, so an unbuildable combination is unreachable in the configurator rather than rejected at checkout.
The visitor is outside a served region
Shipping eligibility resolves with pricing, so an unavailable region is stated before the cart rather than discovered inside it.
The rich media never loads
The models, their differences and their prices are text and markup. The video is the atmosphere, not the argument.
The decisions
Three moves carried the story.
Go headless, keep Shopify underneath
The Storefront GraphQL API keeps inventory, orders and fulfilment where they already worked, while the buying experience moved to Next.js and stopped being constrained by a theme.
Filter by rider, not by price
The guided path asks about experience level first. Price ordering answers a question nobody buying their first hydrofoil is actually asking.
Resolve region on the server
Currency, pricing and shipping eligibility are decided before the page is sent, so a visitor never sees a price that changes once the client has worked out where they are.
What I would test next