Jewelry Website Template
Demo brand: OSMUND · Watchmaker · 16 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this jewelry website template
A complete website for a small watch brand: a collection page, a product page for every model, the workshop story, fixed service prices, a journal, an FAQ and a contact page. Sixteen built pages, all driven by content files, so adding a watch means adding one Markdown file.
It looks like a real workshop. Warm paper, real bench photography of hands at work, walnut and leather textures behind the dark sections, and one heat-blued steel accent that carries every button and highlight. Newsreader for headings with an italic accent phrase, Instrument Sans for everything else.
Every section answers something a buyer wants to know before paying for a watch: what it costs, when it ships, who services it, what other owners say, and how it compares with a fashion watch or a luxury house. Motion is one soft reveal, so nothing gets in the way of the product.
The 16 pages you get
- Home
/ - Hero with product, promises, collection, workshop band, process, comparison table, reviews, journal, FAQ and a closing call to action.
- Collection
/watches/ - Every model as a card, plus a side-by-side specification table built from the product files.
- Product pages
/watches/…/ - Three models. Gallery, price, dial and strap choice, availability, specification, delivery and box contents, a review and related watches.
- Workshop
/workshop/ - The people, the process from bar stock to wrist, and the rules the house works by.
- Service and warranty
/service/ - Fixed service prices, a four-step service flow and warranty questions.
- Journal
/journal/ - Article index. Add an .mdx file and it appears here, on the home page and in the sitemap.
- Articles
/journal/…/ - Three written guides with cover image, FAQ block and further reading.
- FAQ
/faq/ - Grouped questions on buying, owning and visiting.
- Contact
/contact/ - Enquiry form with topic and watch pre-selection, address and visiting hours.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the shop.
What is in the build
- Products as content: price, specs, straps, gallery and availability live in one Markdown file per watch
- Product pages with a no-JavaScript swipe gallery, dial and strap choice and an availability badge (in stock, made to order, waitlist)
- Add a Stripe Payment Link or Shopify Buy Button URL per product to sell directly; otherwise buttons open a pre-filled reservation form
- A comparison table and fixed service prices that answer buyer doubts on the page
- Real workshop photography and texture backgrounds, all optimised to responsive AVIF and WebP by Astro
- All business details in one file, and one accent colour that rebrands the whole site
- About 1 KB of JavaScript, Vitest and Playwright suites included
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 watchmaker's workshop: warm paper ground, walnut and leather textures behind the dark bands, real bench photography, and one heat-blued steel accent.
- The mechanic
- A shop built to convert: collection grid, product pages with gallery, specs and availability, a comparison table, fixed service prices, owner reviews and FAQ. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Warm workshop photography, hands only
- Type & palette
- Newsreader · Instrument Sans
-
#f5f1ea#1b1814#2b45b5
Who it is for
Built for watch brands, independent watchmakers and small makers who sell a considered object: jewellers, knife makers, pen and leather workshops. It suits a range of a handful of products with a story behind them. 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 take payment on the site?
Yes. Add a checkoutUrl to a product file with a Stripe Payment Link, Shopify Buy Button or Lemon Squeezy link and the product button goes straight to checkout. Without one, the button opens the contact form with that watch pre-selected.
How do I add a watch?
Copy one of the files in data/watches/, change the name, price, specs and images, and build. It appears on the home page, the collection, the comparison table and the footer automatically.
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. Swap in your own product photography whenever it is ready.
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
ORRISHAW
Perfumer / fragrance house
Loud
Imagery
WILDROOT
Florist
Loud
Imagery
MYRSTAD
Wireless hi-fi / multi-room audio
Loud
Imagery
KILNMARSH ENAMELWARE
Enamelware homeware store
Loud
Imagery