A headless storefront for a catalogue where every product page is a small editorial
A design study of a headless watch store: a Next.js storefront on Shopify, with specification pages, warranty details and Shopify checkout.
Imagine a watch and jewellery retailer with long product pages: movement details, 360 views, service information and certificates. A standard theme can do part of this. The brief we set ourselves: decide honestly whether headless is justified, and if so build it so the commerce stays in Shopify and the front end stays maintainable.
A Next.js storefront reading products, collections and carts from the Shopify Storefront API, with checkout handled by Shopify. Rich product pages with structured specification data, a service-and-warranty section, and a content layer for editorial pages. Designed to demonstrate architecture.
Choices we made, and why.
- 01
Headless only where the theme runs out
Our default advice is a custom theme, and we say so in our headless guide. Here the spec-heavy product pages and editorial content justify a separate front end. A client without those needs should not pay for the extra moving parts.
- 02
Checkout stays on Shopify
The storefront builds the cart through the Storefront API and hands off to Shopify checkout. Payments, taxes, fraud checks and wallet buttons stay with the platform that maintains them, and we do not rebuild what we would then have to keep secure.
- 03
Static generation with revalidation
Product and collection pages are generated ahead of time and revalidated when Shopify data changes, so pages are served as HTML and stay current. A price change should not wait for a redeploy.
- 04
Specifications as structured data
Case size, movement, water resistance and metal purity live as typed metafields, not a paragraph. The same data drives the spec table, the comparison view, filters and product schema markup.
- 05
Preview and editing for non-developers
Editorial pages come from a content layer with a draft preview, so the team can publish a feature without a code change. A headless build that only developers can edit becomes a bottleneck.
- 06
Own the cost of the extra infrastructure
Headless means a host, builds, monitoring and a developer who knows the code. We list these costs in the proposal and in the care plan rather than hiding them.
Planned timeline: Planned as a 12 to 16 week build: discovery and architecture in weeks 1 to 3, design in weeks 2 to 5, development in weeks 5 to 12, QA, content and load in weeks 12 to 14, launch and stabilisation after.
Designed and engineered by our studio.
Your brand, built to this standard.
Tell us what you sell and when you want to launch.