Your coffee’s website, in morning light
Coffee is bought on a few lines: where it’s from, how it was processed, how it’s roasted, what it tastes of. The bag has to say all that before anyone brews a cup.
This page takes one coffee — your house blend, a single origin, a cold brew — and gives it the whole screen. The bag or tin sits on stone in early light, turns as people scroll, and the camera gets close enough to read what’s printed on it: the farm, the process, the roast.
Your origins or roasts sit beside it as versions, each with its tasting notes in a line. One button leads to where people pay: a Stripe link charged once or every month, or the shop you already have.
What your site shows
A morning shot
The page opens like a morning: your bag on a stone plinth, in daylight coming from high on the left. Above the headline, its name and what it is — whole bean, espresso roast; by the button, the weight and the price.
Where it comes from
As people scroll, the room darkens and the bag lifts and turns. Your statement stands behind it in two lines, then a paragraph: the farm or cooperative, the altitude, the harvest, the way you roast.
Read the bag
Chapter one brings the camera right up to the pack and along it: the valve, the fold, the label with its origin and roast level, as far as your model has them. A title and a text of yours go alongside.
Origins on a slow turn
In chapter three the bag revolves slowly next to up to five versions — origins, roasts or blends. Each has a colour, a name and a line of tasting notes, and people can switch between them as the bag turns.
Order, once or every month
Last, the bag goes back on its plinth beside the order card: your lines — grinds, roasting days, shipping — the price, and a button worded as you like, to a Stripe link that charges once or monthly, or to your shop.
Have this ready
- The coffee’s name and its type — single origin, house blend, cold brew.
- The weight or format — 250 g, 1 kg, ten capsules — and what it costs.
- Your origins or roasts: a name of up to 14 characters, a swatch colour, and tasting notes in 60 characters.
- A 3D model of the bag, tin or bottle (.glb, 25 MB or less); without it, the page falls back on the demo’s perfume flask.
- A paragraph on the farm, the process and your roast, for the story section.
- A Stripe payment link, set to charge once or every month — or the coffee’s page in your shop.
- The details for your legal page: whose name the business is in, the tax number, the address.
Worth knowing
Lead with origin, process and roast
Speciality coffee is chosen by where it grew, how it was processed and how it was roasted. Give each version’s line exactly that — “Huila, washed, medium” — and keep the tasting notes to two or three.
Let people pick the grind at checkout
A Stripe payment link can ask a question with a drop-down — up to ten options when you create it in the dashboard. Whole bean, espresso, filter, cafetière: people choose while paying, and the answer shows in the payment’s details.
Keep roast dates off the 3D label
The model is fixed; roast dates aren’t. Leave the date off the pack’s artwork and say how often you roast in the order card’s lines, which you can change in the wizard and publish again.
Questions
- Can I sell a coffee subscription from this page?
- Yes, through the payment link: when you create it in Stripe, you choose whether the price is paid once or every month. The page’s button simply opens that link, and Stripe takes care of the monthly charge.
- We roast six coffees. Can they all go on it?
- Up to five can, as versions of one product, each with its swatch, name and line — but they all sell at the price and through the button you set once. If prices differ, send the button to your shop and let people pick there.
- Can we change the coffees when the season turns?
- You can: edit the versions in the wizard, in the browser you made the site in, download it again and upload the folder to your Cloudflare project as a new deployment. The files are plain HTML, so a developer can also edit them directly.
- Does it work on phones?
- It does: on a narrow screen the shots bring the bag to the middle and the camera steps back so it still fits across, and the wizard shows you the phone view while you type.