Optometrist Website Template
Demo brand: VELLOWAY EYECARE · Optometrist / eyecare practice · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this optometrist website template
A complete website for an independent optometrist or opticians: a working eye-test booking widget, a frame finder, five service pages with price lists, a prices page, the practice and team, a journal of eye-health guides, an FAQ and a contact form that the booking fills in for you. Twenty-one built pages, all driven by content files.
It looks like a bright, calm practice. White pages with pale lilac-grey blocks, one dark plum band, real photography of phoropters, trial lenses, eye charts, contact lenses and frame walls, and one plum accent. Lora for headings, Nunito for everything else.
Every section answers what a patient wants to know before booking: what does a test cost, what happens in the 45 minutes, do I qualify for a free test, who will I see and when is the next free time. The hero shows the next three free slots, and the funded-versus-private table and the price lists answer the rest on the page. Motion is one quiet reveal.
The 21 pages you get
- Home
/ - Headline with the next three free appointments, promises, services with prices, the practice band, a minute-by-minute eye test, the full booking widget, frames by face shape, funded vs private, patient quotes, guides, FAQ tabs and a walk-in CTA.
- Services
/services/ - All five services with price-from, length and patient quotes tagged by service.
- Service pages
/services/…/ - Five pages: private eye test with OCT, contact lenses, children’s clinic, dry-eye clinic, glasses and lenses. Each has what is included, a price list, a quote, FAQs and a button that opens the booking with that test chosen.
- Frame finder
/frames/ - Twelve frames filtered by face shape, style and budget, with filters kept in the URL so a shortlist can be shared. Each frame can be reserved to try on.
- Book an eye test
/book/ - Choose test type, optometrist, day and time from the next ten open days, see the price, and continue to a pre-filled confirmation form.
- Prices
/prices/ - Every fee grouped by service, the free extras, and the funded vs private comparison.
- About the practice
/about/ - Ownership, the team with initials instead of photos, equipment and accessibility.
- Journal
/journal/ - Eye-health guides. Add a Markdown file and it appears here.
- Guides
/journal/…/ - Four written guides: OCT scans, short sight in children, choosing frames for your face, and the pinhole test.
- FAQ
/faq/ - Questions grouped into eye tests, glasses and contact lenses.
- Contact
/contact/ - Hours, address and a form that the booking widget and frame cards pre-fill from the link.
- Privacy and terms
/privacy/ · /terms/ - Two starter legal pages on a shared layout, with clear placeholders.
- 404
/404 - Designed, with a way back to booking.
What is in the build
- An eye-test booking widget: test type, optometrist with initials avatar, day and time, with a live summary and price, handed to the contact form
- A hero card showing the next three free appointments, each linking straight into the booking with the slot chosen
- A frame finder filtering twelve frames by face shape, style and budget, with the choice kept in the URL
- Services, frames and guides as content: one Markdown file each, with prices, sizes and photos in the frontmatter
- A funded vs private eye-test comparison that stacks cleanly on phones, with placeholder scheme names to replace
- Real practice photography with brand names removed, optimised by Astro
- All practice details, hours and prices in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, covering the booking maths and the frame finder
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
- White pages with pale lilac-grey blocks and one dark plum band, Lora headings over Nunito text, bright practice photography of phoropters, charts, lenses and frame walls, and a single plum accent.
- The mechanic
- Book an eye test by test type, optometrist, day and time with a live price summary that pre-fills the contact form, see the next three free slots in the hero, and filter frames by face shape, style and budget with the choice kept in the URL. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Bright practice: phoropters, charts, lenses, frame walls
- Type & palette
- Lora · Nunito
-
#ffffff#1c1621#86198f
Who it is for
Built for independent optometrists, opticians and eyecare practices that want patients to book online and see prices up front. It suits a practice that competes with the chains on clinical time, OCT scans and continuity of care, and it adapts easily to an audiologist or any clinic that books appointments with named practitioners.
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 my diary?
Out of the box the free times come from a data file of working days and appointment times, with some shown as booked. The choice is passed to the contact form; point that form at your backend or practice software. The README shows where to plug in a real diary feed.
How do I add or change frames?
Add a Markdown file with the frame’s photo, price, shape, material, style and the face shapes it suits. It appears in the finder and can be reserved from the contact form.
What about registration numbers and the funded test scheme?
They are placeholders written into normal sentences, listed in the README under “Before you launch”. Replace them with your regulator, registration numbers, company number and the scheme you provide funded tests under.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed in LICENSING.md. Maker names on equipment and frames were removed, and no patient faces are shown.
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 health & fitness templates
IRONCLAD
Boxing & strength gym
Loud
Display type
Hale
Hot yoga studio
Loud
Imagery
Terra & Still
Wellness coaching
Loud
Palette
Northlight Dental Co.
Dental practice
Loud
Imagery
Havenoak Therapy
Counselling & psychotherapy
Loud
Imagery