Ecommerce Website Template
Demo brand: KILNMARSH ENAMELWARE · Enamelware homeware store · 27 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 online shop for a small maker brand: eleven product pages with colour and size options, a basket that works, shop filters by colour and category, a colour card, delivery and returns, the workshop story, a journal, an FAQ and a contact form that receives orders. Twenty-seven built pages, all driven by content files.
It looks like a real homeware shop. A warm off-white ground, white product cards, one dark band, enamel cobalt as the only accent, and real photography of enamel mugs, kettles, pots and bowls carrying the colour. DM Serif Display for headings, DM Sans for everything else.
Every section answers what a shopper wants to know before they pay: what does it cost in my size, is it in stock, when will it arrive, how far am I from free delivery, and can I send it back. The product picker, the basket and the delivery page answer those on the page. Motion is one quiet reveal.
The 27 pages you get
- Home
/ - Full-width kitchen photo with the headline and two buttons, a strip of colour swatches that filters the products below it, product promises, the workshop story, the order journey, enamel vs stoneware vs stainless steel, reviews with product thumbnails, recipe and care cards, the FAQ and a colour-card offer.
- Shop all
/shop/ - Every product, filtered by category and colour together. The filter is kept in the URL, so /shop/?colour=cobalt can be linked from anywhere.
- Product pages
/shop/…/ - Eleven products. Photo gallery, colour and size picker, quantity, live price, a stock note (in stock, only a few left, pre-order, sold out), add to basket, specification, what is in the box, delivery and care, reviews and related products.
- Colours
/colours/ - The ten colours as swatch cards, each linking to the shop filtered to that colour.
- Our workshop
/about/ - The maker story, how a piece is made in four named stages, and three numbers about the business.
- Delivery and returns
/delivery/ - Four delivery rates with free-delivery thresholds, the returns steps and the ten-year guarantee.
- Journal
/journal/ - Recipe and care cards. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Four written pieces: two recipes, a care guide and a note on why the range has ten colours.
- Help
/faq/ - Answers grouped under Delivery, Returns, Care and Ordering, always open.
- Basket
/basket/ - Line items with quantity steppers, line totals, a free-delivery progress bar, delivery and total, and the checkout button.
- Contact and orders
/contact/ - A form whose topic, product and message are pre-filled from any link, including the full order from the basket.
- Privacy and terms of sale
/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: sizes with their own price and stock, available colours, photos, specification and description in one Markdown file per product
- A product picker with live price and stock notes, and a pre-order state for colours waiting on the next batch
- A basket kept in the browser: slide-out summary on every page and a full basket page, with quantity steppers and a free-delivery progress bar
- Checkout goes to a payment link you paste into one file (Stripe, Shopify, Lemon Squeezy), or hands the full order to the contact form so you can invoice
- Shop filters by colour and category that keep their state in the URL, plus a colour strip on the home page that filters the products in place
- Delivery prices, free-delivery threshold, cut-off time and every business detail in one file; one accent colour and two fonts rebrand the whole site
- Thirty-one real product and kitchen photographs, each listed with its source in LICENSING.md
- Vitest and Playwright suites included, with tests for the basket maths and the add-to-basket flow
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 off-white ground with white product cards and one dark band, DM Serif Display over DM Sans, real enamelware kitchen photography, one enamel-cobalt accent.
- The mechanic
- Product pages pick colour and size with live price and stock notes, add to a slide-out basket with steppers and a free-delivery bar, and check out via a payment link or a pre-filled order form; the shop filters by colour and category in the URL. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Enamel mugs, kettles and pots in kitchens
- Type & palette
- DM Serif Display · DM Sans
-
#fbf7f2#1b1d22#1e56c8
Who it is for
Built for small makers and shops with a real catalogue: kitchenware, ceramics, homeware, candles, coffee gear, stationery or anything sold in a few sizes and colours. It suits a business that wants a fast, good-looking shop it owns, and is happy to take payment through a payment link or an invoice rather than a full e-commerce 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?
Through whatever you connect. Paste a Stripe Payment Link, Shopify checkout or Lemon Squeezy URL into the site file and the checkout button goes there. Leave it empty and the button opens the contact form with the whole order written in, so you can send an invoice.
How do I add a product or change stock?
Each product is one Markdown file. Add a file with its sizes, prices, stock counts, colours and photos, and it appears in the shop, the filters, the home grid and related products. Change a stock number and the stock note on the page follows.
Where does the basket live?
In the visitor's browser, for as long as the tab is open. Nothing is sent anywhere until they check out, so the site stays static, fast and cheap to host.
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. Every photo was checked for faces and brand logos. Swap in your own product shots when you have them.
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
OSMUND
Watchmaker
Loud
Imagery
WILDROOT
Florist
Loud
Imagery
MYRSTAD
Wireless hi-fi / multi-room audio
Loud
Imagery