Skip to main content
Character frontCharacter back
E-commerce · 2023

Josh Wood Colour: a headless Shopify storefront rebuilt with Gatsby 5 and Storyblok

→ CONTEXT: Premium at-home hair colour e-commerce for a UK brand, delivered as agency work at Cressco

ROLE: Software Developer · Cressco (agency)
TIMELINE: 2023
STATUS: Live
FOR: Cressco · Josh Wood Colour (UK)
STACK:
frontend
  • Gatsby 5
  • React
commerce
  • Shopify Storefront API
  • Storyblok CMS
infra
  • Netlify Edge
  • Cloudflare
FIG. 01 Homepage hero with the Miracle System, the store's flagship kit

BLOCK // PROBLEM

Josh Wood Colour sells premium at-home hair colour to customers who need guidance before buying. The store had to combine editorial content, a product-matching quiz, subscriptions and a fast checkout, while its initial load was slow and its campaign emails were landing in spam.

BLOCK // SOLUTION

A headless storefront: Gatsby 5 and React render the site statically from Shopify (catalog, cart, checkout, subscriptions, discount codes and bundles) and Storyblok (editorial content), deployed on Netlify Edge behind Cloudflare. I worked on frontend performance, the responsive redesign and the email-sending infrastructure.

BLOCK // CONSTRAINTS

  • A live store with real revenue: every change had to ship without downtime
  • Brand and editorial guidelines owned by the client
  • Agency timelines shared with other client work

ENGINEERING IMPACT REPORT

A faster, fully responsive headless storefront whose marketing emails reach the inbox again, with one consistent shopping experience across mobile, tablet and desktop.

~20%
Faster initial loadFirst-load performance of the storefront after the frontend optimizations
x2
Campaign email deliverabilityInbox placement after the sender-reputation cleanup and template rewrite

ENGINEERING DECISIONS

DECISION_01

Optimize the existing Gatsby build instead of migrating frameworks

A rewrite would have frozen the store for weeks. Targeted frontend optimizations delivered the faster initial load with zero downtime.

Instead of: Rebuilding the storefront on another framework

DECISION_02

Repair the sending reputation and rewrite the templates instead of switching email provider

Campaigns were hitting spam because of reputation and message content, not the platform. Fixing both restored inbox delivery without a migration.

Instead of: Moving campaigns to a new email provider

DECISION_03

One responsive layout system for mobile, tablet and desktop

Device-specific patches had produced inconsistent experiences. A single responsive redesign gave one shopping flow on every screen.

Instead of: Keeping separate mobile fixes

FIELD NOTES & DEVELOPMENT HIGHLIGHTS

NOTE_01

Frontend optimizations on the Gatsby storefront that made the first load noticeably faster

NOTE_02

Fixed campaign emails going to spam by cleaning up the sending reputation and rewriting the message templates

NOTE_03

Led a responsive UX redesign to deliver a consistent shopping experience across mobile, tablet and desktop

LESSONS LEARNED

  • Performance work on a live store pays off fastest at the first load: that is where most shoppers decide whether to stay.
  • Email deliverability is infrastructure. Reputation and content matter as much as the sending tool.

CORE SYSTEM PALETTE