Back to Work
E-Commerce 2024 — 10 weeks

Arcvue — A Headless Storefront Built for Conversion at the Speed of the Edge

We rearchitected Arcvue's e-commerce experience as a fully decoupled headless storefront, delivering sub-second load times on every page, a fluid checkout flow, and a 3x lift in conversion rate within 60 days of launch.

3x
Conversion uplift
0.8s
Avg page load
98
Lighthouse score
10wk
Delivery time
NEW

When your store is slow, your revenue suffers

Arcvue is a premium lifestyle and homeware brand with a loyal customer base and a growing catalogue of over 1,400 SKUs. Their existing Shopify theme, heavily customised over years of incremental additions, had become a performance liability. Pages took anywhere from 4 to 8 seconds to load on mobile. The checkout was a three-page ordeal. Google's Core Web Vitals were in the red, dragging down organic search rankings.

They came to Cognate with two clear objectives: make the storefront as fast as possible and redesign the checkout to reduce drop-off. After an initial audit, we recommended a headless approach — keeping Shopify as the commerce backend and replacing the storefront layer entirely with a Next.js application deployed to the edge.

Ten weeks later, Arcvue's new storefront was live. Average page load time dropped to under a second. The Lighthouse performance score hit 98. Conversion rate tripled within the first 60 days — a result that exceeded the client's own projections by a significant margin.

The Core Problem

A heavily patched Shopify theme was delivering 4–8 second load times on mobile, failing Core Web Vitals, and losing customers at every step of a three-page checkout. The brand's visual identity was strong; the technology was holding it back.

Rebuilding without disrupting commerce operations

The biggest constraint wasn't technical — it was operational. Arcvue's merchandising team lives in Shopify. They manage products, collections, discounts, and inventory there daily. Any solution that forced them to change their workflow or learn a new CMS would have been dead on arrival.

The headless architecture had to be completely transparent to the commerce team. They needed to keep using Shopify exactly as they always had, with all changes reflected on the new storefront within seconds. At the same time, the engineering solution needed to achieve near-perfect Lighthouse scores without sacrificing the rich, interactive product experience the brand demanded.

⚠️
Key Constraints
  • Shopify must remain the single source of truth for all commerce data
  • Merchandising team workflow must not change at all
  • Zero downtime cutover — existing orders must not be disrupted
  • Sub-1-second LCP on mobile on a median 4G connection
  • Single-page checkout must support discount codes, gift cards, and Shopify Payments
  • SEO continuity — no loss of organic rankings post-launch
💡
Our Approach
  • Shopify Storefront API as the data layer, fully decoupled from rendering
  • Next.js App Router with Incremental Static Regeneration for product pages
  • Deployed to Vercel Edge Network — serving from <50ms latency globally
  • Custom single-page checkout built on Shopify's Checkout API
  • Webhooks from Shopify trigger ISR revalidation within 5 seconds of any product change
  • 301 redirect mapping and metadata parity to preserve all SEO equity

A next-generation storefront served from the edge

The architectural foundation is a clean separation of concerns: Shopify handles commerce logic (inventory, pricing, checkout, fulfilment) and the Next.js storefront handles presentation. They communicate exclusively through Shopify's Storefront API via GraphQL, giving us a stable, version-controlled contract between the two layers.

All product listing and detail pages are statically generated at build time and regenerated incrementally via webhook-triggered ISR. A product update in Shopify fires a webhook that calls our revalidation endpoint; the stale page is regenerated in the background and the new version is served from the edge cache within 5 seconds — all without a full site deploy.

Edge-First Rendering
Static pages served from Vercel's global edge network with an average TTFB under 40ms worldwide. No cold starts, no origin round-trips for cached content.
One-Page Checkout
A fully custom single-page checkout replaced the default three-step Shopify flow. Cart, shipping, and payment all on one screen — reducing checkout completion time by 58%.
Webhook-Driven ISR
Shopify webhooks trigger Next.js on-demand revalidation. Product changes appear on the live site within 5 seconds — no manual deploys, no stale data.
Predictive Search
Instant search powered by the Shopify Storefront API with debounced queries, product image previews, and keyboard navigation. Results appear in under 120ms.
Adaptive Image Pipeline
All product imagery is served via Shopify's CDN with responsive srcsets, next-gen formats (AVIF/WebP), and lazy loading. Images account for <12% of total page weight.
SEO Continuity
Full metadata parity, canonical tags, structured data (Product + BreadcrumbList schema), and a 301 redirect map for every changed URL. Zero organic traffic regression post-launch.
Architecture Decision

We chose Incremental Static Regeneration over full SSR for product pages because Arcvue's catalogue changes infrequently relative to the volume of page views. Pre-rendering and serving from the edge eliminates the per-request compute cost entirely while webhook-triggered revalidation keeps content fresh. For the cart and checkout, where data is session-specific, we use client-side rendering against the Storefront API.

10 weeks from audit to live storefront

We structured the project so that a feature-complete staging environment was available for the client's review from week 6 onward, giving the merchandising team three weeks of parallel running before the production cutover.

Weeks 1–2
Audit & Architecture
Audited the existing Shopify theme, catalogued all customisations, and mapped the full data model via the Storefront API. Produced a redirect inventory of all 1,400+ product URLs and defined the ISR and cache strategy before writing any code.
Weeks 3–5
Design System & Core Pages
Built the component design system in Figma and in code simultaneously. Delivered the homepage, collection listing pages, and product detail pages — all achieving Lighthouse 95+ from day one of the build.
Weeks 6–8
Checkout, Search & Cart
Built the single-page checkout, sliding cart drawer, and predictive search. Integrated discount codes, gift card redemption, and the full Shopify Payments flow. Staging environment handed to client for UAT.
Weeks 9–10
SEO Migration & Cutover
Implemented the full redirect map, verified metadata parity across all pages, and submitted updated sitemaps. Executed a zero-downtime DNS cutover with a 24-hour parallel monitoring window. No order disruption, no ranking regression.

Lean, proven, and built for performance

Framework
Next.js 14 (App Router)
UI Library
React + TypeScript
Styling
Tailwind CSS
Commerce Backend
Shopify
Commerce API
Shopify Storefront API
Query Language
GraphQL
Hosting
Vercel Edge Network
Images
Shopify CDN + next/image
Analytics
Vercel Analytics
Payments
Shopify Payments
Search
Shopify Predictive Search API
CI / CD
GitHub Actions + Vercel

What actually changed for the business

Before Arcvue Headless
4–8 second page load times on mobile
Lighthouse performance score of 28–41
Three-page checkout with high abandonment
Core Web Vitals all in the red
No search functionality on the storefront
Theme customisations blocked every Shopify update
After Arcvue Headless
Sub-800ms average page load on mobile
Lighthouse performance score of 96–99
Single-page checkout; 58% faster to complete
Core Web Vitals all green across all pages
Instant predictive search across full catalogue
Shopify backend fully decoupled; updates never break the storefront

Measurable outcomes within 60 days of launch

3x
Conversion rate uplift
Overall store conversion rate tripled in the first 60 days post-launch, driven by faster load times and the streamlined checkout experience.
0.8s
Average page load time
Down from a 4–8 second range on the legacy theme. Achieved through edge rendering, aggressive caching, and a fully optimised image pipeline.
98
Lighthouse score
Average across all key pages including homepage, collection, and product detail. Up from a 28–41 range on the legacy theme.
58%
Faster checkout completion
Average time from cart to confirmed order dropped by 58% thanks to the single-page checkout consolidating all steps into one screen.
41%
Reduction in bounce rate
Faster load times directly reduced mobile bounce rate by 41%, keeping more visitors engaged long enough to browse and purchase.
0
Organic ranking losses
Zero loss of organic search positions post-launch due to meticulous redirect mapping, metadata parity, and structured data implementation.

Working with Cognate felt like having a world-class engineering team embedded in our company. They understood what we were trying to achieve commercially, not just technically. The new storefront is night and day — our customers notice it, our numbers prove it, and our merchandising team didn't have to change a single thing about how they work. Fast, proactive, and they truly care about the outcome.

JP
James Petrov
Founder, Arcvue
Next Case Study
FinFlow — Financial Analytics Dashboard
View Case Study