Jennifer Fisher was running a traditional Shopify theme that had become slow, JavaScript-heavy, and increasingly hard to operate as the site grew.

Beyond performance issues, the operations team struggled with managing content, structure, and launches within the constraints of the theme. Changes were brittle, workflows didn’t scale, and day-to-day updates required more coordination than they should have.

The work focused on replacing the theme with a headless Shopify storefront that removed these performance and operational constraints altogether.

Dynamic render latency

To set the stage for A/B testing, personalization, and directories, pages had to render dynamically at request time.

It was equally important for its web servers to respond within 500ms to avoid any noticeable latency for users.

Given that Shopify and the CMS APIs were already globally distributed, it made sense to also render the storefront on the edge, close to users.

The result was pages rendered dynamically within a consistent TTFB of ~300ms.

Combining that with a reasonable prefetching strategy made the site feel shockingly instant to most users.

Paint and interaction latency

The original theme shipped with roughly 1 MB of JavaScript, long main-thread execution, and slow navigation.

The rebuild coincided with the early release of Next.js 13 and adopted React Server Components early.

Rendering and data fetching moved to the server, allowing most of the UI to be rendered without shipping JavaScript to the browser.

Only components that required interactivity were hydrated on the client.

This naturally reduced client-side runtime cost significantly, making the new site ship with roughly 144 KB of JavaScript, most of which came from Next.js and React themselves.

As a result, the storefront achieved near-perfect Core Web Vitals under real conditions while remaining fully interactive.

Operations

Shopify remained the system of record for products, pricing, inventory, and checkout.

By removing the traditional theme layer, content and commerce concerns were fully decoupled. This allowed the storefront to evolve independently while keeping Shopify’s operational workflows intact.

At the time, no headless CMS—including Sanity—offered true visual editing. A custom visual editing layer was built so content could be edited directly against the rendered storefront. Editors worked in context, interacting with real layouts instead of abstract fields, and could publish without guessing how content would appear.

Content workflows were also synchronized with Shopify operations. Releases could be coordinated so content updates went live in lockstep with product launches, discounts, and campaigns, reducing manual coordination and release risk.

This setup gave the operations team full control over content, structure, and timing, without reintroducing the constraints of a theme-based workflow.

Edit Title or Price in Shopify to sync into Sanity

Aftermath

Weeks after its launch, Jennifer Fisher was featured at Next.js Conf 2024 and received public attention around its performance and execution.

Sanity later released Presentation, a visual editing experience, and we participated as early beta testers based on the work done on this project.

The exposure reinforced the direction of the work and how closely it aligned with where the ecosystem was heading.