Luxury retail on the web has a specific problem: the product costs $2,400, but the shopping experience feels like a $20 store. Slow product pages, generic checkouts, and a mobile experience that punishes the exact customer most likely to buy — someone browsing at 10:47pm, on an iPhone, in bed.
VAULT//8 came to us at that exact stage. Their Shopify Plus storefront was converting at 1.8% — below the luxury average of 2.4% — and every A/B test they ran failed to move it. The problem wasn't the offer, the photography, or the price. It was that the site felt slow and unconvincing on the only device that mattered.
What was actually wrong
We started with a two-week diagnostic before proposing anything. The findings:
- 4.8s mobile LCP on product pages — driven by an unoptimized hero image (1.8MB JPEG), 14 third-party scripts, and no CDN caching for HTML
- 1.2s Time to First Byte — Shopify's Liquid render was doing too much work on every request
- Six abandoned scripts — installed during past A/B tests and never removed; each adding 40–200ms of main-thread blocking
- Checkout had 5 steps, one of which was a "review your items" page that 40% of users scrolled past without reading
- The PDP lacked editorial rhythm — 12 images stacked in a grid, no video, no size guide above the fold, no styling context
None of these were unique to VAULT//8. We've seen the same pattern on luxury stores in the US, UK, UAE, and Australia. The industry-wide failure is treating e-commerce like a utility when it should be treated like a boutique.
The luxury mobile trap: Across our client base, luxury storefronts average a 4.1s mobile LCP — roughly 2x the e-commerce average. This is backwards, because luxury customers browse more on mobile and abandon faster than any other segment when the experience feels cheap.
What we built
We kept Shopify as the commerce backend — it's reliable, their ops team knew it, and rebuilding order management would have wasted three months. But we replaced the theme entirely with a headless Next.js 14 storefront served at the edge.
1. Storefront — Next.js 14 (App Router) on Vercel Edge
Every product page, collection, and content page is server-rendered at build time or on-demand. Static first, personalized second. The HTML ships before JavaScript arrives, and the LCP element — a product hero image — is preloaded with fetchpriority="high".
2. Commerce — Shopify Storefront API (2024-10)
Products, variants, inventory, and checkout all flow through Shopify's modern Storefront API. Their admin remains the source of truth; our frontend is a presentation layer over it.
3. Editorial — Sanity CMS with live preview
The brand team writes product stories, lookbooks, and campaign pages in Sanity. They see the rendered page in the preview pane as they type — no rebuilds, no "save and refresh."
4. Media pipeline — Cloudflare R2 + Images
Every image uploaded to the CMS gets auto-generated into AVIF, WebP, and JPEG at 6 resolutions. The largest hero image on the site is 62KB — a 96% reduction from the original 1.8MB.
5. Edge logic — Cloudflare Workers
Geo-based currency detection, A/B test assignment, and cache warming happen at the edge — 12ms from any major city. No round trip to origin.
| Layer | Technology | Purpose |
|---|---|---|
| Storefront | Next.js 14 + TypeScript | Server-rendered pages, instant navigation |
| Commerce | Shopify Storefront API | Products, cart, checkout, orders |
| Content | Sanity CMS | Editorial pages, lookbooks, campaigns |
| Media | Cloudflare R2 + Images | Zero-egress image delivery |
| Edge | Cloudflare Workers | Currency, A/B, cache warming |
| Analytics | GA4 + PostHog + Sentry | Funnel, product, error tracking |
The parts that were harder than expected
The Shopify checkout is still Shopify
You cannot rebuild checkout with the Storefront API — Shopify controls it. We compressed their default flow from 5 steps to 3 by using Shopify's Checkout Extensibility (their modern app framework) and moving payment, address, and shipping into a single scroll on desktop and a 3-panel swipe on mobile.
Cart state across edge and origin
Because some pages are static and others dynamic, cart state lives in a signed cookie that's read at the edge. When a user adds to cart, the cookie updates and a background revalidation fires. The user never sees a stale cart.
Video without killing LCP
Editorial pages wanted video heroes. We ship a poster image as the LCP element, and only load video if the user has a fast connection (Network Information API: effectiveType is 4g) and the video element is in the viewport for 500ms. On slow connections, the video never loads — users get the poster.
Multi-currency without confusion
Currency is geo-detected, but the user can override. Prices are stored in USD and converted nightly with a 1% buffer to absorb FX drift. Checkout happens in the user's currency via Shopify Markets — one code path, no double-conversion.
Cache strategy that worked: Static HTML for 95% of pages, cached at Cloudflare for 1 hour with stale-while-revalidate=86400. When a product changes in Shopify, a webhook triggers a targeted purge for that product's URL and its collection URLs. Total cache miss rate after warm-up: 3.8%.
What the numbers look like
Ninety days after launch, compared to the previous 90 days. Traffic was flat — this is a same-traffic comparison.
| Metric | Before | After | Change |
|---|---|---|---|
| Mobile LCP | 4.8s | 1.2s | −75% |
| Desktop LCP | 2.4s | 0.8s | −67% |
| INP (mobile) | 380ms | 92ms | −76% |
| Checkout conversion | 1.8% | 3.1% | +72% |
| Cart abandonment | 78% | 61% | −22% |
| Revenue per visitor | Baseline | +73% | |
| Organic sessions (90d) | Baseline | +41% | |
| Average order value | $2,180 | $2,410 | +10.5% |
The AOV lift surprised us. We expected conversion to improve — we didn't expect that the same customers would spend more. Our theory: when the page feels premium, people add the second item. When it feels cheap, they buy one and leave.
What it costs to run
Total monthly infrastructure on top of Shopify Plus:
| Item | Monthly cost |
|---|---|
| Vercel Pro + usage | $70 |
| Sanity CMS (Growth plan) | $15 |
| Cloudflare R2 + Images | $38 |
| Upstash Redis | $30 |
| Sentry + Better Stack | $50 |
| Cloudflare Workers (paid) | $5 |
| Total add-on | ~$208/month |
Revenue per visitor grew by 73% in the first 90 days. On a store doing 8,000 monthly sessions at $4.20 RPV, that's an extra $24,400 in monthly revenue for $208 in infrastructure. The hosting costs paid for themselves 117 times over.
Six lessons we'll carry to the next luxury build
- Headless does not mean "leave Shopify." It means replacing the theme layer. The commerce backend stays.
- Editors need live preview. If content teams can't see what they're publishing, they will fight the CMS. No exceptions.
- Video is a conversion killer unless it's conditional. Poster first, video on fast connections, in-viewport, after delay.
- Every third-party script costs money. We removed 6 scripts and freed 340ms of main-thread time. That's the difference between INP pass and fail.
- Checkout is sacred. Fewer steps beat more payment methods. Always.
- Luxury customers are the most sensitive to speed because they have the highest expectations. A slow page doesn't just lose the sale — it damages the brand.
Key takeaways
1. Headless ≠ leaving Shopify — it means replacing only the theme.
2. 1.2s mobile LCP drove a 1.3-point conversion lift and +73% revenue/visitor.
3. Removing 6 unused scripts freed 340ms of INP-blocking work.
4. Single-scroll checkout beat 5-step checkout by 72% conversion.
5. Editorial content needs live preview — no exceptions.
6. Total add-on cost: $208/month on top of Shopify Plus.
If you run a premium brand on Shopify, WooCommerce, Magento, or headless — and the experience on mobile doesn't match the price tag — see our e-commerce practice or tell us about your store. We'll send a written audit within 24 hours.