Plumbing Website Template
Demo brand: Crowder Plumbing & Drainage · Plumbing & drainage · 22 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this plumbing website template
A complete website for a plumbing, heating and drainage firm: a booking card in the hero, an online two-hour slot booking flow, a postcode coverage checker, a fixed price list, six service pages, areas covered, advice articles, an FAQ and a contact page. Twenty-two built pages, all driven by content files.
It looks like a trusted local firm. White pages with deep navy bands, a yellow 24/7 emergency strip on every page, real pipework, boiler and bathroom photography, and one trade-yellow accent. Bricolage Grotesque for headings, Source Sans 3 for everything else.
Every section answers what a homeowner with a problem needs to know right now: do you cover my street, what will it cost, when can you come, and can I trust you. Prices are published, slots are bookable and reviews carry the job and the town. Motion is one soft reveal.
The 22 pages you get
- Home
/ - Emergency strip, full-bleed hero with booking card, key numbers, six services, postcode checker, slot preview, what every job includes, the firm, reviews, advice and top questions.
- Services
/services/ - All six services with price-from.
- Service pages
/services/…/ - Emergency plumbing, boiler installation, boiler servicing, bathrooms, drain unblocking, CCTV surveys. What is included, prices, postcode check and a review each.
- Book online
/book/ - Job, then day, then a two-hour slot from the next ten working days, with a live summary. Falls back to a plain request form without JavaScript.
- Prices
/prices/ - Grouped fixed-price tables from one data file.
- Areas
/areas/ - Postcode districts with call-out fee and typical response time, plus the checker.
- About
/about/ - The family firm, the engineers and the guarantees, without faces.
- Advice
/advice/ - Article index. Add an .mdx file and it appears here and on the home page.
- Articles
/advice/…/ - Four guides: a leak, boiler servicing, bathroom costs, winter drains.
- FAQ
/faq/ - Grouped questions on booking, prices and emergencies.
- Contact
/contact/ - Enquiry form, phone, address and hours.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with the emergency number and a way back.
What is in the build
- Online booking with bookable two-hour slots, taken slots and working days all in one data file
- A postcode coverage checker with call-out fees and response times per district
- A published fixed price list, and services as content with prices and inclusions per file
- A 24/7 emergency strip and click-to-call phone number on every page
- Real plumbing and heating photography with maker marks removed, 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 booking flow and postcode checker
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 local family trade firm: white pages with deep navy bands, a yellow 24/7 emergency strip, real pipework, boiler and bathroom photography, and one trade-yellow accent.
- The mechanic
- A trade site built to take bookings: a hero booking card, a /book/ flow with service, day and two-hour slot, a postcode checker for call-out fees, published fixed prices, review cards and six promise tiles. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Hands-on plumbing and heating photography, no faces
- Type & palette
- Bricolage Grotesque · Source Sans 3
-
#ffffff#13202f#f2b705
Who it is for
Built for plumbers, heating engineers and drainage firms, and an easy fit for electricians, locksmiths, roofers and any local trade that sells on speed, fixed prices and a service area. It suits a firm that wants the phone to ring and the diary to fill.
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 the booking connect to a real calendar?
Not out of the box. Slots come from a data file so the flow works on any static host. Point the final step at your form backend or booking tool, or generate the slot file from your calendar.
Can I change the postcode areas?
Yes. Districts, fees and response times live in one data file. The checker, the areas page and every service page follow.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source and any retouching in LICENSING.md. Maker names on boilers and fittings were removed.
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 trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery
HOLLICK & VANE
HVAC contractor
Loud
Imagery