Coffee Shop Website Template
Demo brand: QUARLOW ROASTING CO. · Coffee roastery · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this coffee shop website template
A complete website for a specialty coffee roaster with a small café: a hero with this month’s coffee and its price, six coffees with their own pages, a subscription builder, subscription plans, a savings table, brew guides with a ratio calculator, wholesale pricing, the roastery story with café hours, an FAQ and a contact form. Twenty-one built pages, all driven by content files.
It looks like a good roastery bag. A warm oat background, espresso-brown bands on roasted-bean and jute textures, real photography of the drum, the cooling tray, green coffee, cherries and brewing carrying the colour, and one coffee-cherry red accent. Hedvig Letters Serif for headings and prices, Onest for everything else.
Every section answers what a coffee buyer wants to know: what does a bag cost, how fresh is it, how much does a subscription save, can I cancel, and how do I brew it. The subscription builder works out the price per delivery, the price per cup, the saving and the next roast day as you choose, then hands the order to the contact form. Motion is one quiet reveal.
The 21 pages you get
- Home
/ - Hero with this month’s coffee card, promises, the six coffees, the roastery band, four process steps, the subscription builder, the savings table, a review score with star breakdown, three plans with their own FAQs, a short FAQ, brew guides and a closing call to action.
- Coffees
/coffees/ - All six coffees as cards, plus a table comparing origin, process, roast, best brewer and 250 g / 1 kg prices.
- Coffee pages
/coffees/…/ - Six coffees. Gallery, tasting notes, both bag prices with the subscription price, subscribe and buy buttons, recipes, origin details, delivery notes, a review and related coffees.
- Subscriptions
/subscribe/ - The subscription builder, what happens after you subscribe, the three plans, the per-bag savings table and the full FAQ.
- Brew guides
/brew-guides/ - A two-way brew ratio calculator for five methods, and the guide cards with method, ratio and brew time.
- Guides
/brew-guides/…/ - Four written guides: pour-over, cafetière, dialling in espresso and cupping at home.
- The roastery
/roastery/ - The story, three values, a timeline, a photo row, café hours and how to visit or book a cupping.
- Wholesale
/wholesale/ - Per-kilo prices by monthly volume for cafés and offices, what is included, and a sample request.
- FAQ
/faq/ - Orders and delivery, subscriptions and wholesale, in three groups.
- Contact and orders
/contact/ - An order form with coffee, bag size, grind and delivery frequency, pre-filled from the builder and every buy button.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the coffees.
What is in the build
- A subscription builder: pick a coffee or roaster’s choice, 250 g or 1 kg, grind and frequency, and see price per delivery, price per cup, saving and next roast day
- A two-way brew ratio calculator for pour-over, cafetière, AeroPress, espresso and cold brew
- Coffees as content: prices, tasting notes, origin details, recipes and photos in one Markdown file per coffee
- A subscription-versus-one-off savings table and plan cards, all worked out from the same prices
- A review score with a 5-to-1 star breakdown, and café opening hours set once and shown in the footer and on the roastery page
- Every buy and subscribe button pre-fills the order form; it works without JavaScript
- Twenty-five real photographs, optimised to WebP by Astro
- Vitest and Playwright suites, including tests for the subscription maths
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Warm oat ground with espresso-brown textured bands, Hedvig Letters Serif over Onest, real roastery and brewing photography, one coffee-cherry red accent.
- The mechanic
- A subscription builder prices each delivery, cup and saving and shows the next roast day, then pre-fills the order form; a two-way ratio calculator covers five brew methods. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Roasting drum, cooling tray, beans, brewing close-ups
- Type & palette
- Hedvig Letters Serif · Onest
-
#f1ebe2#211813#8c1c2c
Who it is for
Built for specialty coffee roasters that sell beans online and run subscriptions, with or without a café. It also fits tea merchants, chocolate makers and other small producers that sell a rotating range by weight on a schedule, and anyone who also supplies cafés or offices wholesale.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How do I change prices and the subscription discount?
Bag prices live in each coffee’s Markdown file. The discount, postage, free-delivery threshold, bag sizes, grinds and frequencies are in one settings file, and the builder, plan cards and savings table all follow.
Does it take payment?
Not on its own. Orders arrive through the contact form, already filled in. Point the form at your form service, add a Stripe Payment Link to any coffee for one-off sales, or link the builder to your subscription checkout. The README covers all three.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. They were picked without recognisable faces or third-party logos.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More food & drink templates
KELDMOOR HONEY HOUSE
Apiary / honey house
Loud
Imagery
Lowfield Salt
Solar saltworks
Loud
Imagery
SÖL — Kitchen & Fire
Restaurant
Loud
Moving set-piece
MARLEDON ESTATE
Winery / vineyard estate
Loud
Imagery
MALTGARTH BAKEHOUSE
Bakery / bakehouse
Loud
Imagery