Headless Shopify + Strapi for a Skincare Brand
Higher conversion and larger orders, with routine and ingredient content that sells the product.
- Sector
- D2C · Skincare · Headless
- Built with
- Next.js
- Shopify
- Strapi
01 · Discover
What the client needed
A skincare brand sells through education: ingredients, skin types, and routines. Its theme could only show a product and a description, so that content lived in blog posts that didn’t lead to a sale.
Requirements
- Ingredient, skin-type, and routine pages that link straight to products
- Routine bundles and cross-sells to raise order value
- Very fast pages for search and paid traffic
- Product discovery: filter by concern, skin type, and ingredient
- Content the team edits without a developer
- Ready for AI search, with structured data on products and content
Constraints
- Keep Shopify checkout, payments, and apps
- Carry over existing SEO rankings
- Content team works in a CMS, not code
02 · Pitch
What we proposed
The content model was the hard part, so we designed it first and chose the stack to fit it.
Options we weighed
What we agreed
- A content model for ingredients, concerns, skin types, and routines
- Shopify for products, cart, and checkout
- Phased launch: catalogue first, then routines and bundles
03 · Build
How we built it
Two systems, one storefront: Strapi for content and Shopify for commerce, joined in Next.js at build time.
Every requirement, and what we built for it
| Requirement | What we built |
|---|---|
| Content that sells | Ingredient and routine pages in Strapi, each linked to the products that contain or complete them |
| Higher order value | Routine bundles and cross-sells driven by the same content model |
| Very fast pages | Statically generated pages, refreshed when content or stock changes |
| Product discovery | Filters by concern, skin type, and key ingredient across the catalogue |
| Editing without developers | Strapi content types and reusable page sections with previews |
| AI and search readiness | Product, FAQ, and breadcrumb structured data on every relevant page |
Platform and architecture
- Storefront
- Next.js (App Router), statically generated with on-demand refresh
- Commerce
- Shopify Storefront API for products, cart, and checkout
- Content
- Strapi CMS for ingredients, concerns, routines, and page sections
- Sync
- Shopify and Strapi webhooks that refresh only the pages affected
04 · Handover
Launch and handover
We launched the new storefront in front of the existing Shopify checkout, so customers and orders carried on as before.
- Redirects for every old URL
- Content migrated from blog posts into structured types
- Training for the content team on Strapi
- Architecture and runbook documentation
05 · Outcome
The outcome
Higher conversion and larger orders, with routine and ingredient content that sells the product.
Education and buying now happen on the same page, and the content team publishes on its own.
- Routine and ingredient content leads straight to a purchase
- Bundles and cross-sells are built into the browsing flow
- Fast pages with structured data for search and AI answers
More case studies
Have a project like this?
A few lines is enough. You’ll hear back from an engineer, not a salesperson.