Coffee Roaster Template Template
A complete one-page shop for a small coffee roaster, built on an espresso ground with one acid-green accent, and a working demo basket with a fly-to-basket arc, grind selection and a live subtotal as its signature.
About This Template
A production-ready shop for an independent coffee roaster, and the first multi-product commerce template in the library. It refuses the kraft-brown-and-tan packaging look the category defaults to: the whole site runs on a deep espresso ground with oat type and a single acid-green accent, set in a high-contrast serif against a grotesk and a mono that carries nothing but roast data. The hero is the shop rather than a picture of one: there is no hero photograph, just all six coffees standing at scale on a drawn shelf, with this week's lot written out as its real roast log and buyable above the fold. The product range is the spine of the page rather than a grid bolted onto a marketing landing page, and the signature is a genuinely working basket. Adding a bag flies a ghost of the bag artwork on an arc into the basket button, the count bumps, and a slide-out drawer holds real line items with quantity steppers, a per-bag grind choice, remove controls and a live subtotal with a free-delivery threshold. The bags themselves are drawn in CSS, so a buyer's own products need no photography, while the roastery imagery is bundled as art-directed WebP derivatives baked to a warm espresso duotone. The copy is written for a fictional Leeds roaster in a plain, technical voice, with a real roast log on every bag.
What's Included
- Complete deployable one-page shop: nav with basket, shelf hero with a buyable featured lot, six-product range, roasting explainer, subscriptions, visit details, footer
- Signature demo basket: a slide-out drawer with line items, quantity steppers, per-bag grind selection, remove controls and a live subtotal
- Fly-to-basket arc built from two tweens of the same duration with different eases, so the ghost lobs over rather than sliding, with no extra plugin to load
- One Map is the entire state: the drawer, the header count, the subtotal, the delivery bar and the in-basket badges are all written from it, so they cannot disagree
- Grind changes merge rows rather than duplicating them, so the same coffee ground the same way is always one line
- Free-delivery progress bar that counts down the amount still needed
- Coffee bags drawn entirely in CSS, with a crimped seam, a degassing valve, the coffee's initial and a roast-level meter: change a letter and a data attribute for a new product
- Real roast logs on every bag (charge, first crack, drop, development ratio) and a roasting section that explains what the four numbers mean
- Bundled roastery photography baked to a warm espresso duotone, around 390KB total
- Three-colour token block: change espresso, oat and acid green and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
- Accessible: focus trap, Escape to close, focus returned to the trigger, a polite live region for every basket change, and a full keyboard path through the drawer
- Degrades completely: with JavaScript off there is no basket UI on the page at all, and every product carries a phone and email ordering route instead
Perfect For
- Coffee roasters, tea merchants and other small-batch producers selling several products
- Any independent shop with a short, curated product range rather than a catalogue
- Bakeries, delis, breweries and farm shops taking orders for a handful of lines
- Subscription products where a plan sits alongside one-off purchases
- A front end to hand to a developer wiring up Stripe, Shopify or Snipcart behind it
How It Works
One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device, and every section is guarded so a buyer can delete any of them. The basket deliberately sits outside that context and does not depend on GSAP at all, so a blocked CDN costs the shop its animation and nothing else. Its state is one Map keyed by SKU and grind, because the same coffee ground two ways is two things to pick and pack; every other number on the page is derived from that Map by a single render pass that rebuilds the drawer list from a <template> in the markup, so the classes stay in the HTML and no selector is ever built at runtime. Product facts are read once from data attributes on the cards, so editing a price in the HTML is enough. The fly-to-basket arc clones the CSS bag artwork, positions it from a measured rect, and runs two same-duration tweens with different eases, which bows the path above the straight line without a motion-path plugin; under reduced motion the ghost is skipped entirely and the state simply changes. The drawer traps Tab in both directions, closes on Escape, returns focus to the trigger, stops Lenis while open and carries data-lenis-prevent on its scrolling list. Every JavaScript hook is a data attribute or a single plain class, and every masked reveal tweens the same transform property its CSS start state sets.