Crate Clothing

The Liquid storefront presented five categories of structural revenue leakage:

• Theme-coupled commerce logic. Size guides, cross-sells, and bundles were hard-coded into templates or scattered across product descriptions as raw HTML. Every catalogue change required engineering.
• Performance bottleneck. Mobile LCP of 31.9 seconds (Lighthouse lab data). Industry benchmarks associate each 1-second improvement with 2–8% conversion lift. At 31.9s, the store fell well outside acceptable mobile thresholds.
• Hard-coded marketing logic. Updating a cross-sell set or bundle offer required code changes, QA, and a deploy cycle. The cost of iteration suppressed it entirely.
• Analytics fragility. No structured event layer. Tracking relied on Shopify's default theme injection. Insufficient for attribution, retargeting accuracy, or consent-gated measurement.
• Iteration risk. The team stopped iterating. Revenue stagnated not from lack of ideas, but from fear of breaking what worked.

The migration to Shopify Hydrogen was not a technology upgrade. It was an infrastructure replacement.

The Liquid theme was removed entirely. In its place: a server-rendered React application backed by Shopify's Storefront API, deployed on Oxygen, with typed data contracts throughout.

Every route renders server-side. Data is fetched at the edge before the page reaches the browser. No client-side waterfall, no layout shift, no theme assumptions that break under load.

This is not about React vs Liquid. It is about replacing an architecture that resisted change with one designed for it.

Three systems built on Shopify Metaobjects, moving commerce logic into structured, admin-manageable data:

• Size guides as metaobjects with structured measurement fields. Linked to products via metafield references. Operations team manages without engineering.
• Cross-sell ("Shop the Look") via bidirectional product metafield references. Every product page becomes a merchandising surface.
• Bundles with configuration in product metafields. Automatic discounts via Shopify's discount API. Real-time savings displayed as customers select items.

• GTM as container layer. GA4 and Meta Pixel as tags. Structured events on route transitions and commerce interactions.
• Event integrity. Purchase attribution pulls directly from Shopify order confirmation data. No client-side inference.
• Consent gating. Genuine script gating, not cosmetic. No scripts fire before consent is granted.
• Sentry. Error monitoring + session replay (100% on error, 10% ambient). Performance tracing at 20% sample rate.

• Server-side rendering. Every page fully rendered at the edge. Search engines receive complete HTML without JavaScript execution.
• Metadata generation. Titles, descriptions, OG tags, and JSON-LD structured data generated server-side from Shopify data.
• Sitemap + blog. Blog content via Shopify's article API with full SSR. All URLs included in sitemap.

The 93% LCP reduction addresses the most severe conversion blocker. With industry benchmarks suggesting 2–8% conversion lift per second of load improvement, a ~30-second reduction places this intervention well within the range where meaningful conversion improvement becomes statistically probable.

The structured commerce layer creates additional AOV surface area on top of load-time gains. The measurement layer enables attribution, which means future spend decisions are made on data, not assumptions.

The modelling above is deliberately conservative. At the base case (+5%), the annual impact exceeds the cost of an ongoing optimisation retainer. At the strong case, it approaches the cost of the infrastructure build itself.

The infrastructure installed is not the end state. It is the foundation for continuous revenue optimisation.

• Continuous CRO. Each element of the purchase funnel can be isolated, measured, and improved independently.
• A/B testing. Server-side experiments without layout shift or client-side flicker. Clean attribution against control variants.
• Structured reporting loops. GA4 + Sentry + Shopify analytics as a three-layer reporting surface. Automated against defined KPIs.
• Ongoing performance monitoring. Each month, new hypotheses tested, merchandising tuned, performance tracked.