Product Landing Page
Demo brand: ORRISHAW · Perfumer / fragrance house · 20 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this product landing page
A complete website for a small fragrance house: a page for each fragrance, a scent-finder quiz, a discovery set, refills, the raw materials, the story, a journal, an FAQ and a contact page. Twenty built pages, all driven by content files.
It looks like a real perfumer’s bench. Pale stone ground, a full-bleed workshop photo in the hero, unlabelled bottles ready for your own product shots, verde marble and linen textures behind the dark sections, and one oakmoss-green accent. Cormorant Garamond for headings and quotes, Manrope for everything else.
Every section answers something a fragrance buyer hesitates over: which one is mine, what does it smell like over a day, can I try before I commit, and why does it cost this much. The scent finder and the discovery-set credit do the selling. Motion is one soft reveal.
The 20 pages you get
- Home
/ - Full-bleed hero, promises, the four fragrances, scent finder, discovery set, the bench, process, materials, comparison, reader quotes, journal and FAQ.
- Fragrances
/fragrances/ - All four with family, notes and price, plus a side-by-side comparison.
- Fragrance pages
/fragrances/…/ - Four products. Gallery, size choice, notes pyramid (top, heart, base), wear time, delivery and refills, a review and the other three.
- Scent finder
/scent-finder/ - Three questions on mood, moment and materials recommend one fragrance. Lists all four without JavaScript.
- Discovery set
/discovery-set/ - Four samples with the price credited against a first full bottle, shown as a worked sum.
- Refills
/refills/ - Refill pricing tiers and how the send-back service works.
- Materials
/materials/ - Eleven raw materials, where each comes from and what it does in the formulas.
- About
/about/ - The perfumer, the bench and how a batch is made.
- Journal
/journal/ - Article index. Add an .mdx file and it appears here and on the home page.
- Articles
/journal/…/ - Three written pieces on testing a scent, sourcing and refills.
- FAQ
/faq/ - Questions on scent, delivery and refills.
- Contact
/contact/ - Order and consultation form that pre-selects fragrance and size from the page you came from.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the fragrances.
What is in the build
- Products as content: notes, family, sizes, price and gallery in one Markdown file per fragrance
- A working scent-finder quiz whose recommendations are weighted in one data file
- A discovery-set offer and refill tiers that answer the "try before you buy" doubt on the page
- Add a Stripe Payment Link or Shopify Buy Button URL per fragrance to sell directly; otherwise buttons send a pre-filled order enquiry
- Real bench photography, unlabelled bottles and texture backgrounds, optimised to AVIF and WebP by Astro
- All business details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the finder and the contact pre-fill
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
- A small perfumer's bench: pale cool stone ground, full-bleed workshop photography, unlabelled bottles on sand, verde marble and linen textures behind the dark bands, and one oakmoss-green accent.
- The mechanic
- A fragrance shop built to convert: a three-question scent finder that recommends one fragrance, a discovery set credited against the first bottle, refill pricing, notes pyramids per fragrance and a comparison against designer and niche houses. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Soft window-light bench photography, hands only
- Type & palette
- Cormorant Garamond · Manrope
-
#f0efec#18201c#2f5d4a
Who it is for
Built for independent perfumers and fragrance brands, and a good fit for candle makers, skincare, tea and any small-range product sold on how it feels rather than how it looks. It suits a handful of products with a lot of detail each. For a catalogue of hundreds of items with a cart, start from the ecommerce build.
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
Can I change the scent finder’s questions?
Yes. The questions, answers and how each answer weighs toward each product live in one data file. Change them to match your own range, and the quiz, its results and the no-JavaScript fallback follow.
Can I take payment on the site?
Yes. Add a checkoutUrl to a fragrance file with a Stripe Payment Link, Shopify Buy Button or Lemon Squeezy link and the button goes straight to checkout. Without one, it opens the order form with that fragrance and size pre-selected.
Are the bottles a real brand?
No. The product photos use plain, unlabelled bottles from Pexels so your own product photography drops in without clashing. Every image is listed with its source in LICENSING.md.
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 retail & product templates
OSMUND
Watchmaker
Loud
Imagery
WILDROOT
Florist
Loud
Imagery
MYRSTAD
Wireless hi-fi / multi-room audio
Loud
Imagery
KILNMARSH ENAMELWARE
Enamelware homeware store
Loud
Imagery