Headless Shopify eCommerce

Pre-Owned Luxury Watch Storefront

A headless Shopify storefront for one-of-one inventory, with authentication records and a sell-your-watch flow.

View live demo Opens a working demo with sample content in a new tab.
Meridian & Co. demo on desktop and phone

On location

  • Watch Clock — Meridian & Co.
    Watch ClockPhoto: Ricky Kharawala (CC0)
  • Watch Time — Meridian & Co.
    Watch TimePhoto: Wil Stewart (CC0)
  • Watch Time — Meridian & Co.
    Watch TimePhoto: Donald Tong (CC0)
  • Watch Clock — Meridian & Co.
    Watch ClockPhoto: Rodion Kutsaev (CC0)
  • Objects Watch — Meridian & Co.
    Objects WatchPhoto: Tomasz Bazylinski (CC0)

About the Project

This case study describes a headless Shopify storefront for a pre-owned luxury watch dealer. Almost every watch it sells is unique: one reference, one year, one condition, one set of papers. That breaks the assumptions of most online shops, where products have stock levels and buyers are happy with a few photos and a short description.

We built a Next.js front end on the Shopify Storefront API that treats each watch as a one-of-one piece. Checkout reservations stop the same watch being sold twice, every listing carries its authentication and service history as structured data, a responsive image pipeline delivers detailed photography without slowing phones down, and a guided sell-your-watch flow turns visitors into a source of new stock.

About the Client

The client is a dealer in certified pre-owned luxury watches, with watchmakers who inspect, authenticate and document every piece before it is listed. Its buyers spend significant sums and expect the confidence of a showroom, while its stock depends on owners choosing to sell their watches to the dealer.

The previous shop treated watches like ordinary products, struggled with large imagery, and left authentication details buried in description text.

Project Goals

  • Prevent any unique watch from being sold twice.
  • Show authentication, condition and service history clearly on every listing.
  • Serve high-resolution photography quickly on mobile connections.
  • Make selling a watch to the dealer possible without a phone call.
  • Keep Shopify’s checkout, payments and order management.

Project Overview

The Challenge and Our Solution

The Challenge

Every item is unique — one watch, one photograph set, one condition report — which standard themes handle badly. High-resolution imagery made pages slow, and two customers occasionally bought the same watch minutes apart. Buyers of a $12,000 watch also wanted evidence of authentication before committing, which the site did not show.

Our Solution

We kept Shopify for checkout, payments and orders, and built a headless storefront on Next.js against the Storefront API. Each watch carries structured metafields for reference, year, condition, service history and authentication, rendered consistently and marked up as structured data. Inventory is single-quantity with a short reservation at checkout so a watch cannot be sold twice. Imagery is served responsively with a zoom viewer, and a sell-your-watch flow captures photographs and details for a valuation without a phone call.

Why a Headless Shopify Storefront Suits One-of-One Stock

Shopify is excellent at checkout, payments and orders, but its themes are built for catalogues of repeatable products. A headless approach keeps those strengths while giving complete control of the browsing experience. The Next.js front end reads products through the Storefront API and hands buyers to Shopify’s secure checkout when they are ready.

That separation let us design pages around the questions luxury watch buyers actually ask: which reference, which year, what condition, what has been serviced, and how do I know it is genuine.

Running the front end separately also lets the dealer change how collections, filters and listing pages work without touching checkout or order management, which stays exactly where the team already knows it in the Shopify admin.

  • Next.js and React on the Shopify Storefront API
  • Shopify Payments and checkout retained
  • Pages designed around authentication and condition

Checkout Reservations That Stop Double Sales

Every watch is a single-quantity product, and when a buyer starts checkout the piece is reserved so nobody else can buy it at the same moment. If the checkout is abandoned the reservation lapses and the watch returns to sale. Duplicate sales of unique stock, which previously had to be unwound with an awkward apology, were eliminated.

Authentication Records as Structured Data

Reference number, year, condition grade, service history and authentication details are stored in Shopify metafields rather than free text. The storefront renders them consistently on every listing, filters can use them, and structured data helps search engines understand each piece.

Buyers noticed: authentication and service history were cited in enquiries once they were visible on every listing, which is exactly the reassurance an expensive purchase needs.

Fast, Detailed Imagery and a Sell-Your-Watch Flow

Luxury watches sell on detail, so photography is large and plentiful. A responsive image pipeline and image CDN serve the right size for each screen, and a zoom viewer loads high-resolution detail only when it is asked for. Page load times improved markedly despite much larger imagery.

The sell-your-watch flow guides owners through photos and details of their watch and produces a valuation request without a phone call. Submissions became a steady acquisition channel for new stock.

Each submission arrives with consistent details and photos, so the dealer’s team can respond with an indicative valuation quickly and invite the strongest pieces in for inspection by its watchmakers.

Our Process

How We Delivered It

  1. Understanding the Buyer and the Seller

    We looked at how buyers judge a pre-owned watch and how owners decide to sell one.

  2. Product Data Model

    Reference, year, condition, service history and authentication defined as Shopify metafields.

  3. Design for Detail and Trust

    Listing pages built around imagery, condition and documentation rather than marketing copy.

  4. Headless Build

    Next.js and TypeScript on the Storefront API, with checkout reservations and an image pipeline.

  5. Launch and Acquisition Flow

    Storefront launched alongside the sell-your-watch flow so new stock arrived as sales began.

Key Features

What We Delivered

  • One-of-one inventory

    Single-quantity products with checkout reservations so a piece cannot be double-sold.

  • Authentication records

    Reference, year, condition, service history and authentication held as structured data.

  • High-resolution imagery

    Responsive image pipeline with a zoom viewer that does not punish mobile connections.

  • Sell-your-watch flow

    Guided photo and detail capture producing a valuation request without a phone call.

Outcome

Results and Impact

  • Duplicate sales of unique stock eliminated through checkout reservations.
  • Page load times improved markedly despite much larger imagery.
  • Authentication and service history shown on every listing, which buyers cited in enquiries.
  • Sell-your-watch submissions became a steady acquisition channel for stock.

Client Feedback

What the Client Says

★★★★★

Every watch is unique, which breaks most themes. Not this one.

DirectorPre-owned luxury watch dealer

Services

Services Behind This Project

The Next.js, Shopify, React expertise we used to build this headless shopify ecommerce — and can bring to yours.

  • Next.js Development

    Next.js websites and web apps with server-side rendering, static generation, image optimisation and route-level code splitting for top Core Web Vitals.

  • Shopify Development

    Custom Shopify theme development in Liquid, Online Store 2.0 sections, app integrations, migrations and conversion-focused storefronts.

  • React Development

    Custom React.js front ends, dashboards and single-page applications built with TypeScript, reusable components and server-side rendering for SEO.

  • eCommerce Development

    High-converting online stores on Shopify, WooCommerce and BigCommerce — with smooth checkout, secure payments and easy product management.

FAQ

Frequently Asked Questions

What is a headless Shopify storefront?

It is a custom front end, here built with Next.js, that reads products from Shopify through the Storefront API while Shopify still handles checkout, payments and orders. You gain full design freedom and performance control without giving up Shopify’s commerce engine.

Is headless right for every Shopify store?

No. A well-built theme suits most stores and is simpler to run. Headless makes sense when your products, content or performance needs go beyond what themes do comfortably, as with unique, high-value items that need rich documentation and imagery.

How do you stop a unique item being sold twice?

Each piece is a single-quantity product, and it is reserved as soon as a buyer begins checkout. If the checkout is not completed, the reservation expires and the item goes back on sale, so two buyers can never pay for the same watch.

Will large photos slow the site down?

Not if they are delivered properly. An image CDN serves sizes matched to each screen, modern formats keep files small, and the zoom viewer loads high-resolution detail only when a buyer asks for it. In this project page speed improved even as imagery grew.

Can the store help us buy stock as well as sell it?

Yes. A guided sell-your-watch flow collects photos and details from owners and produces a structured valuation request for your team. It replaces back-and-forth phone calls and can become a dependable source of new inventory.

What does a headless build involve in ongoing maintenance?

You maintain a front-end application as well as the Shopify store, so updates, hosting and monitoring need an owner. We set up deployment pipelines and documentation so changes are routine, and many content updates still happen in Shopify’s admin as before.

Similar Work

Related Projects

Case studies built with the same technologies or for similar needs.

  • House Home — Harborne Estates
    • Next.js
    • React
    • Headless CMS

    Headless CMS Website

    Estate Agency Property Listings

    A headless CMS and Next.js site rendering 1,240 live listings that sync from the agency system every few minutes.

  • Kestrel Wealth demo — home page
    • Next.js
    • React
    • TypeScript

    Headless CMS Website

    Wealth Management Insights Hub

    A Next.js front end over headless WordPress that took a compliance-heavy content library from slow to near-instant.

  • Semi trucks line up to pick — Northline Freight
    • React
    • TypeScript
    • Node.js

    Web Application Development

    Freight Dispatch & Driver Tracking Platform

    A live dispatch board built in React and Node.js that replaced a spreadsheet-and-phone workflow for 120 drivers.

  • Guy Man — Altura Tours
    • Vue 3
    • Nuxt
    • TypeScript

    Booking Platform Development

    Adventure Tour Booking & Itinerary Platform

    A Vue 3 and Nuxt platform handling departures, seat availability, deposits and guide assignments for multi-day tours.

  • Herbs Spices — The Kitchen Table
    • Astro
    • Svelte
    • TypeScript

    Publishing Website

    Food Magazine & Recipe Archive

    An Astro rebuild of a 3,850-recipe archive that cut JavaScript by two thirds and made mobile pages load in about a second.

  • Power Lines — Gridline Inspections
    • Progressive Web App
    • Service Workers
    • Workbox

    Progressive Web App

    Utility Inspection Field App (PWA)

    An installable, offline-first progressive web app used by inspection crews in places with no usable signal.

Let’s Connect

Want Results Like These?

Share your project details and our experts will get back to you within one business day with the best solution — free consultation, no obligation.