The problem
A retro-California apparel brand ran on a template storefront that was slow and left conversion on the table.
Any redesign had to prove itself on real revenue, not opinion, before fully replacing the incumbent store.
The approach
Rebuilt the storefront headlessly on Shopify's Storefront API so merchandising and checkout stayed on Shopify while the front end was fully custom.
Fronted the root domain with a Cloudflare Worker that splits live traffic 50/50 with a sticky cookie, running the new build as a controlled A/B test against the existing store.
Stamped each session's variant (treatment vs. control) as a cart attribute that survives Shopify-hosted checkout into the order for clean attribution.
What I built
- Next.js App Router storefront (homepage, collections, product, cart, search, policy pages) on TypeScript and Tailwind v4, with guest checkout via Shopify
- A Cloudflare Worker traffic-splitter with sticky assignment and its own unit tests, wired to a single origin
- Variant attribution flowing from cart attribute to GA4 via the Measurement Protocol on the orders-paid webhook
- GA4 analytics, Sentry error monitoring (client/server/edge), Vitest unit tests, and a Playwright critical-path E2E test
- An offline imagery pipeline (generation to optimized WebP/AVIF) so no image work happens at runtime
- Railway deployment with fail-fast config validation and a beta noindex guard until launch
- Next.js (App Router)
- TypeScript
- Tailwind CSS v4
- Shopify Storefront API
- Cloudflare Workers
- GA4 (Measurement Protocol)
- Sentry
- Vitest
- Playwright
- Railway
Result
Delivered a production headless storefront running as a measurable 50/50 experiment against the client's existing store, so the winner is decided by conversion data rather than assumption.