A subscription-box brand moved to a headless storefront and kept its bundle logic intact

Representative examplesEvery case study in this library is an illustrative composite of the kind of engagement we deliver — written to show our method and standards, not to name clients.

Where they started

Each month the brand packs themed subscription boxes for a few thousand subscribers, with the box's contents customizable before each cut-off. The customizer is the product's heart: subscribers swap items, skip flavors, and adjust frequency from their account. Merchandising runs on a weekly drop cadence that keeps the catalog moving, and content operations are a two-person job. The storefront had grown around the subscription app's widgets, and every app update seemed to fight the theme a little harder.

What it was costing

The brand's customization experience — subscribers swapping box contents — lived in a slow legacy theme that fought every subscription-app update. Page interactions blocked for seconds on swap actions, and churn tracked the broken UX.

What they could see

• Swapping an item in the box customizer froze the page for seconds; some subscribers gave up mid-swap and shipped the default box.
• Support tickets arrived weekly from subscribers whose customization hadn't applied — the theme's state and the subscription platform's records disagreed.
• Every subscription-app update risked breaking the customizer, so updates were deferred, which compounded the fragility.
• Churn exits cited the account experience directly; subscribers described the customizer as broken rather than inconvenient.

The constraints we worked inside

• The subscription platform's API shaped what customization could do; the frontend had to respect its model.
• Merchandising ran on a weekly drop cadence; content operations could not slow down.
• Existing subscribers' box states had to migrate invisibly — nobody may lose a customization.

What had been tried before

The in-house marketer hired an agency to optimize the legacy theme — lazy loading, image compression, and a lighter variant of the customizer.

The bottleneck was the theme's request-per-swap architecture, not page weight; compressing images made the frozen seconds feel slightly faster while remaining frozen.

The subscription app's newest customizer widget was trialed on a hidden template, meant to replace the hand-built one.

It couldn't express their bundle rules — flavor categories with swap limits — and its callbacks conflicted with the same theme state the old widget fought.

What we proposed

We proposed a headless storefront on Hydrogen with the box customizer rebuilt as application state: swaps render optimistically, the subscription platform's API reconciles in the background, and failures surface honestly instead of silently. Catalog pages would serve from the edge with per-product invalidation on drop days, protecting the weekly cadence. The decisive constraint was the subscription platform's API — its model defines what customization can mean — so the frontend was designed around its operations, not against them. Existing subscribers would migrate through a two-week shadow run before any member saw the new storefront.

Just as important is what we ruled out, and why:

• Upgrading in place to the theme engine the subscription app now recommends — It would keep the customizer as a widget bolted into a theme — the same coupling that broke on every app update, with the migration cost paid anyway.
• Building the customizer as a standalone app dropped into the existing store — The store's theme would still own the account session and checkout, so swaps would cross three systems per action — more moving parts than the problem justified.

How the work ran

Delivered by the systems pod — 2 engineers over 11 weeks, with working increments reviewed with the client every week.

The stack, and the reasoning

Hydrogen

Customization is application logic, not page decoration; Hydrogen gives the customizer its own state layer instead of fighting a theme's DOM for it.

Storefront + Customer APIs

Account, cart, and checkout data come from one authenticated surface, so the customizer's optimistic state has a single source to reconcile against.

Subscription platform API

Swap rules, skip logic, and box state live there by definition; calling it directly meant the frontend follows its model instead of approximating it.

Edge caching

Weekly drops spike catalog traffic; per-product invalidation keeps drop pages fast without the two-person content team manually purging caches or fearing stale prices.

What went wrong

How we worked together

Cadence

Monday build demos recorded as short walkthroughs the founder watched between drop tasks, plus a live 45-minute review every second week.

Client side

The founder owned product decisions; the content lead represented merchandising and tested drop publishing on the new storefront from week four.

Decisions

The cut-off calendar ruled the schedule — anything risky froze in cut-off week; the founder resolved trade-offs by Friday of each demo week.

They provided

Sandbox access to the subscription platform, the drop calendar six weeks ahead, and the content lead's time for publishing rehearsals.

What changed

The headline: swap-action response time (p95) in the box customizer, lab-measured across the release, verified against field inp — 2.4s → 0.6s, read from Synthetic + field monitoring. A second check: monthly subscriber churn over the following quarter at −11%.

The customizer stopped being a support category. Subscribers swap items during a commute now, and the team hears about it in reviews — the account experience went from churn evidence to a selling point in acquisition emails. App updates went from dreaded events to routine, because nothing in the storefront breaks when the subscription platform ships. The content team publishes drops without thinking about the customizer at all, which is the quietest possible proof the two systems finally respect each other's boundaries.

The result was read from Synthetic + field monitoring against the pre-engagement baseline over the stated window, with a guardrail check on monthly subscriber churn over the following quarter. Where platform-reported numbers and business outcomes differ, this record says which layer it is quoting.

What they own now

• The Hydrogen storefront repository and deployment pipeline under the brand's own accounts.
• A customizer state-machine diagram documenting swap, skip, and pause behavior against the subscription API.
• The shadow-migration comparison reports as the template for any future data migration.
• Edge caching rules with the per-product invalidation webhook documented and owned.
• A load-test script reproducing cut-off-week bursts, so API limit changes surface early.