E-commerce · Trek Coffee Co.
Trek Coffee Co. — headless Shopify storefront on Next.js
A headless Next.js storefront on top of Shopify's commerce engine for a coffee roastery: brand-true product pages, roast metadata, subscriptions, and a checkout flow that doesn't read like a stock theme.
The problem
Trek Coffee Co. is a coffee roastery shipping fresh-roasted beans direct to subscribers and one-time buyers. The default Shopify themes are durable but uniform — they make every coffee shop look like every other coffee shop. Trek wanted a storefront that carried the brand (outdoor, trail, expedition) all the way through the purchase path, kept Shopify as the commerce backend, and did not require a monthly retainer to keep alive.
What we built
A headless storefront at shop.trekcoffeecompany.com: home, collection, product detail, cart, and checkout entry, all running on Next.js with the App Router and reading from the Shopify Storefront API. Shopify still handles inventory, payments, fulfilment, and the final checkout — we only replace the front-of-house experience that buyers actually see.
What the site has to do
- Communicate the brand on home and product pages without reading like a template.
- Carry coffee-specific metadata (roast level, origin, tasting notes) into product pages cleanly.
- Support both one-time orders and recurring subscriptions through a single, low-friction flow.
- Stay fast on mobile — most coffee buyers are scrolling on a phone, often on the couch.
Technical highlights
Headless Shopify on Next.js, not Hydrogen
We use Next.js App Router with the Shopify Storefront GraphQL API directly through Apollo Client, rather than adopting Hydrogen. The trade is deliberate: Next.js gives Trek a stack their next developer (or their next agency) already knows, and the Storefront API is stable enough that the framework choice is a near-zero-cost decision. No Oxygen lock-in, no Hydrogen-specific patterns to relearn.
Cart lives in a cookie, created at the edge
Cart state is a single Shopify cartId in an HTTP-only cookie, created lazily by Next.js middleware on the first request that needs one. No Redux, no Zustand, no client-side cart store to keep in sync. Adds and removes go straight to cartLinesAdd / cartLinesRemove mutations and the server response is the source of truth. Survives refresh, survives device, survives tab.
No-cache by default on commerce queries
Apollo is configured with fetchPolicy: "no-cache"for product and cart queries. In a commerce context, a stale price or an out-of-stock product shown as available is worse than a slightly slower page. Every product read goes to Shopify; we let Vercel's edge handle the speed story instead.
Stack
- Next.js 16 (App Router) + React + TypeScript
- Tailwind CSS 4
- Shopify Storefront API (GraphQL) via Apollo Client + GraphQL Codegen
- Shopify Checkout (commerce backend — inventory, payments, fulfilment)
- MDX for editorial pages (story / about / shipping)
- Radix UI primitives + Framer Motion for interaction details
- Vercel for hosting + Vercel Analytics
Outcome
Trek is live at shop.trekcoffeecompany.com, taking real orders and subscriptions on a build that loads fast on mobile and reads like the brand. Specific traction figures will be added once the client has approved the public version of this case study.
Why it matters to clients
Most Shopify shops on the default theme look interchangeable. Going custom usually means either a six-figure Hydrogen rebuild with an agency retainer attached, or a Liquid theme so customized that the next developer can't touch it. Trek's build is the third option: headless Next.js on top of Shopify's commerce engine, fixed price, no retainer, and code that any Next.js developer can pick up tomorrow.