Storefront Demo — Shopify Adapter
Internal capability demo
A working proof-of-concept storefront on the headless-commerce architecture with a Shopify-Storefront-API-shaped adapter — instant catalog and PDP loads, a live price/stock strip, and an optimistic add-to-cart with a cache-tag revalidation demo built in.
The challenge
The headless-commerce capability’s core claim — instant pages with live prices and stock, an optimistic cart, and a backend that’s swappable without a rebuild — needed to be proven, not just asserted in the capability copy.
“A storefront that loads like a static page, streams in live price and stock a moment later, and never makes a customer wait to add something to their cart.”
The approach
- 01
Built a Next.js 16 UI shell — catalog grid, PDP, cart drawer — designed so the commerce backend is isolated behind a single data-layer adapter.
- 02
Wrote a Shopify-Storefront-API-shaped mock adapter in lib/commerce, so pointing it at a real Shopify store later changes the data layer, not the UI.
- 03
Wired cache-tag revalidation into the PDP price/stock strip, with a demo control that simulates a backend price change and shows the storefront update within seconds.
- 04
Implemented an optimistic add-to-cart — the UI updates the instant a customer clicks, with rollback if the server rejects it.
Design iteration
A local proof, ahead of a public one
This is a working demo running locally, not yet deployed anywhere public — standing it up against a real Shopify dev store and shipping it live is the next step, turning this proof-of-concept into a public case study.
What we built
Highlights of the work
Live price/stock strip
The PDP shows a “live · checked [time]” price, not a number frozen at build time.
Optimistic cart
Add-to-cart updates instantly — no spinner, no waiting on a server round-trip.
Cache-tag revalidation demo
A price-change control proves the edit-and-see-it-live-in-seconds path end to end.
Shopify-shaped adapter
Data layer modeled on the real Shopify Storefront API shape, ready to swap for a live store.
Let’s talk
Have a project, or a product that could work harder?
Most projects begin with a short, no-pressure discovery call.