Storefront
Case Study · Ecommerce · K-beauty · Northampton
A headless ecommerce storefront that combines Shopify's commerce infrastructure with a branded, content-driven Next.js experience so buyers can shop by skin concern and ingredient—not only by collection.
Harrison's Beauty is a curated K-beauty and skincare brand founded by Harrison James in Northampton. The brief came alongside the Harrison James Accounting project: the same client, two entirely different businesses, two entirely different audiences, delivered at the same time.
Where the accountancy site needed to feel structured, credible, and professional, Harrison's Beauty needed to feel premium, calm, and easy to shop. Korean skincare is a considered category. Buyers are not impulse purchasing. They are researching ingredients, routines, and brand philosophy before committing. A storefront that felt generic or cluttered would push them toward a competitor with a more editorial experience.
The goal was a headless ecommerce storefront that combined Shopify's commerce infrastructure with a branded, content-driven frontend that could educate as well as sell.
K-beauty as a category has a discoverability problem on generic ecommerce templates. Products are organised by brand or by department, which works when a buyer already knows what they want. It fails when a buyer knows they have a skin concern, dryness, sensitivity, hyperpigmentation, but does not know which products address it.
A standard Shopify theme would have given Harrison's Beauty a functional store. It would not have given it a shopping experience built around how K-beauty customers actually think and buy. The product catalogue needed to be navigable by concern, by ingredient, by routine stage, and by brand ethos, not just by collection.
There was also a content gap. K-beauty brands earn trust through education. Ingredients matter. Routine guidance matters. A site with no editorial layer would sell products but miss the opportunity to build the kind of informed customer loyalty that drives repeat purchases.
The decision was to build headless rather than use a standard Shopify theme. Shopify handles what it does well: product data, inventory, cart logic, and checkout. The frontend is built in Next.js and owns the entire customer experience: navigation, discovery, editorial content, and brand presentation, without being constrained by a theme's templates.
Sanity was introduced as the CMS layer specifically to solve the content gap. Schemas were built for brands, concerns, ingredients, routines, bundles, learn articles, and homepage content. This gives the site the architecture to grow into a genuine skincare education resource, not just a product catalogue. A buyer landing on a concern page sees relevant products, ingredient explanations, and routine guidance in one place.
The product architecture was built with resilience in mind. Fallback demo catalog data means the storefront renders correctly in development and staging environments without requiring live Shopify credentials, which makes testing and iteration faster and more reliable.
The site runs on Next.js 16 with the App Router, React 19, TypeScript, and Tailwind CSS, connected to the Shopify Storefront GraphQL API for live product data, cart operations, and checkout handoff. Cart creation, line item management, and checkout URL generation are all handled through Shopify while the frontend owns the cart UI and session persistence.
The Sanity integration covers site settings, brand schemas, concern and ingredient taxonomies, routine and bundle structures, editorial learn articles, and homepage content blocks. This creates genuine separation between commerce data (Shopify) and editorial content (Sanity), which means either layer can evolve independently without breaking the other.
The homepage hero is a full-screen editorial video with WebM and MP4 support, poster fallback, reduced-motion handling, gradient vignette overlays, and responsive spacing that accounts dynamically for the sticky header and cookie banner height. It creates the premium first impression a skincare brand needs without compromising mobile load performance.
Ecommerce fundamentals were all implemented cleanly: product detail pages, collection pages, mobile navigation, cart drawer, local cart persistence, cookie consent, legal policy pages, SEO metadata, loading states, and fallback imagery throughout.
Harrison's own words cover both builds: "The skincare site looks clean, premium and easy to shop, while the accountancy site feels professional, credible and structured exactly how clients would expect. Everything runs smoothly, is mobile friendly, and looks great."
What Harrison's Beauty has is the architecture to grow. The Sanity content layer means new brands, new concerns, new routines, and new editorial content can be added without developer involvement. The Shopify integration means the commerce side scales with the catalogue. The separation of concerns between the two layers means neither constrains the other as the business expands.
Next.js 16, React 19, TypeScript, Tailwind CSS, Shopify Storefront GraphQL API, Sanity CMS, Vercel — headless ecommerce with editorial content layer
“The skincare site looks clean, premium and easy to shop, while the accountancy site feels professional, credible and structured exactly how clients would expect. Everything runs smoothly, is mobile friendly, and looks great.”
The Sanity schema design was done alongside the frontend build rather than before it. That approach works but creates moments where a content structure that seemed right at schema time does not quite fit what a page component needs, requiring small schema adjustments mid-build. Designing the full content model as a standalone exercise before writing any frontend code would have produced cleaner schemas and reduced the back-and-forth between content structure and component design.
If you are running on a standard Shopify theme and hitting its limits — discovery, content, brand experience, or performance — book a 48-hour audit. £149, credited against any project started within 30 days.