Crate Clothing

Shopify Hydrogen migration, performance rebuild, and structured commerce architecture.

Visit the live storefront

Overview

Crate Clothing was running on a customised Shopify Liquid theme that had reached the point where every meaningful change carried too much friction. I came in as the sole frontend engineer, took over an incomplete headless build, and shipped the storefront as a Hydrogen application.

The work was not just a visual rebuild. The important part was moving the store into a codebase that could support better performance, clearer product systems, and future feature work without fighting the theme layer.

Performance result

Performance work was treated as architecture rather than polish: server-rendered routes, cleaner data loading, reduced client-side waterfalls, a more deliberate component structure, and tighter control over what reached the browser on first load.

Hydrogen architecture

I rebuilt the storefront on Shopify Hydrogen with React Router, TypeScript, Tailwind, and deployment through Shopify Oxygen.

The route layer fetches commerce data server-side through Shopify's Storefront API, with typed GraphQL queries and route-level loaders keeping data requirements close to the UI that consumes them. That gave the project a much cleaner model than the old Liquid theme: product pages, collection pages, search, cart interactions, and content-backed areas all had explicit data boundaries.

Structured commerce layer

A major part of the work was moving commercial content out of hard-coded templates and into structured Shopify data.

I used metaobjects and metafields for systems like size guides, product relationships, bundles, and curated merchandising content. Products could reference structured content from Shopify admin, while the Hydrogen frontend rendered it through typed components.

That made the store easier to operate and easier to extend: the codebase owned presentation and behaviour, while Shopify remained the source of truth for commerce data.

Storefront features

I implemented the frontend systems needed for a modern streetwear storefront, including SSR collection pages with URL-driven filtering, search and product discovery through the Storefront API, product pages with structured size guides and related-product logic, bundle display and cart behaviour designed for a headless context, content-backed pages with SEO metadata generated server-side, and mobile-first navigation, filtering, drawers, and product UI.

The work required balancing customer-facing polish with the boring engineering details that keep a commerce build reliable.

Observability and analytics

Headless Shopify builds do not inherit all the useful behaviour a theme gives you for free. I wired analytics and monitoring deliberately rather than treating them as an afterthought.

That included route-aware analytics events, GTM, GA4, and Meta Pixel integration, consent-aware script loading, and Sentry coverage for production error visibility.

What this shows

This project is the clearest proof of my current specialist lane: Shopify Hydrogen, headless commerce architecture, React and TypeScript implementation, and performance-focused frontend engineering.

The useful work was not just making the site faster. It was creating a storefront architecture that was easier to reason about, easier to operate, and strong enough to keep improving after launch.

Stack

← Back to portfolio