Ecommerce Website Template
Demo brand: KILNMARSH ENAMELWARE · Enamelware homeware store · 28 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this ecommerce website template
A complete shop, not a shop-shaped landing page: twenty-eight built routes covering thirteen individual product pages, four category collections, a colour-card route, a working basket, delivery and returns, an about page, contact and a two-post journal.
Enamel iron-red — the catalog’s first red ground. The whole site is one closed colour card of enamel colourways, and every card colour is a computed subtractive mix of three metal-oxide colorants over frit white. Epilogue against Space Mono. The palette is the loud channel and it is entirely derived: not one hex was chosen by eye.
The signature move is the glaze bench. Scroll pours two oxide pots together and the produced glaze colour is computed live by a subtractive reflectance model, landing on a named card colour — while a control strip beside it shows the naive additive mix going muddy. The null cases ship too: Ash, all three oxides at once mixing to near-neutral mud, and Frit, no oxide, the white base.
The 28 pages you get
- Home
/ - The glaze bench, the range, the colour card and the shop close.
- Shop all
/shop/ - The full catalogue index.
- Thirteen product pages
/shop/… - Foundry Mug, Camp Mug pair, Two-Tone Mug, Frit Beaker, Deep Bowl, Nesting Bowls, Water Jug, Serving Pot, Stove Kettle, Kilnmarsh Kettle, Footed Colander, Lidded Churn, Pantry Tins. Each a full route with price, colourways and stock state.
- Four collections
/collections/… - Cookware, drinkware, tableware and storage — each with its own "from" price, which is how a homeware shop earns category-level search.
- Shop by colour
/colour-card/ - Ten fired colourways as a browsing axis. The page that makes a small range feel like a range.
- Basket
/basket/ - A working client-side basket with line items, subtotal, delivery threshold and total.
- Delivery & returns
/delivery-returns/ - A real route. Required, and the page that removes the last objection before checkout.
- Our workshop
/about/ - Where it is made. In homeware this is the price justification.
- Contact the shop
/contact/ - A working form plus live tel: and mailto: paths.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - Looking after enamel, and why ten colours and not a hundred. Care content and range philosophy — the two things homeware customers actually read.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A scroll-driven glaze bench computing produced colour through a subtractive reflectance model, with a control strip showing the naive additive mix going muddy alongside it
- Every colour in the build computed as an oxide mix over frit white — a closed colour card rather than a chosen palette, with Ash and Frit shipped as the null cases
- Thirteen product routes, four collections and a colour-card browsing axis — a real catalogue structure, not three demo products
- A working client-side basket with line items, subtotal, a delivery threshold and total
- Stock states, colourways and category mapping all as typed data in
src/data - Epilogue with Space Mono, both self-hosted; a working contact form plus live tel: and mailto:
- Vitest and Playwright suites included in the repository
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 62 different worlds reading as one design system in different paint.
- The world
- Enamel iron-red — the catalog's first red ground. The whole site is one closed colour card of enamel colourways, every card colour a computed subtractive mix of three metal-oxide colorants over frit white. Palette is loud; type, set-piece and texture held quiet.
- The mechanic
- "The Glaze Bench Mixes": scroll pours two oxide pots together and the produced glaze colour is computed live by a subtractive reflectance model, landing on a named card colour, while a control strip shows the naive additive mix going muddy.
- Loud channel
- Palette
- Imagery. A lifted merchandising grade
- Type & palette
- Epilogue · Space Mono
-
#b5231d#f9f1e4#f9f1e4 - The control case
- Ash — all three oxides at once, mixing to a near-neutral mud; and Frit, no oxide, the white base. Drawn, not labelled.
Who it is for
Built for homeware, ceramics, kitchenware and small-batch physical product shops with a real catalogue. It suits a maker or retailer with a coherent range and a colour story. It is a static site with a client-side basket — the right base for a shop you will connect to a checkout provider, not a replacement for Shopify’s back office.
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
Does it take payment?
No. The basket is real — line items, subtotal, delivery threshold, total — but checkout is where you connect Stripe, Polar, Shopify’s Storefront API or whatever you already use. Hard-wiring one provider into a template would date it within a year and lock you in.
How do I manage stock?
Stock state is a field on each product in typed data. For a small-batch maker that is usually enough and it keeps the site static and instant. If you need live inventory, the product data is the seam to connect to your source of truth at build time.
What is the colour card actually doing?
It is a second browsing axis, and it is also the whole design system: ten colourways, each computed as an oxide mix, used both as product options and as the site’s palette. That is why a thirteen-product shop looks like a considered brand rather than a product grid.
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
Display type
OSMUND
Watchmaker
Loud
Texture
WILDROOT
Florist
Loud
Palette
MYRSTAD
Wireless hi-fi / multi-room audio
Loud
Imagery