Wren Opticians. Free optician and eyewear HTML & Astro template

About Wren Opticians

Wren leads with eyewear information and a clear practice/visit structure. Its compact wordmark and conventional navigation sit above close-up optical photography; cool white, lens blue and taupe carry through a disciplined frame grid and useful inner pages. Local Wren Serif and Sans are renamed Libre Caslon Text and Inter derivatives.

Best suited to: Independent optical practices and eyewear shops presenting verified services, frame information and general visit enquiries.

Desktop and mobile screenshots

Captured from version 1.0.0 on 30 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 9-page design. Confirm your email to download. Newsletter emails are optional; no account or license key is needed.

What’s in the design

• Nine complete pages include The Practice, Eyewear, Finch 48, Eye Care Services, Eye Examination, Your Visit & Questions, Contact, Home and 404.
• Six original illustrative frame concepts combine shape and material filters with a live count, reset and empty state. All records remain visible without JavaScript.
• Finch 48 has a complete detail page with sample material, lens/bridge/temple dimensions, illustrative frame price and three colour buttons that update the original drawing and announce the selection.
• The Eye Examination page is a practical appointment-information outline: what to ask about service type, duration, fees, preparation, access and next steps. It does not give clinical advice.
• Your Visit includes printable questions and native FAQs, plus clearly labelled sample hours and address. No verified premises or access claim is made.
• The contact form allows known frame/service preselection, checks native required/email validity and reveals an explicit encoded email draft. Editing a field clears the old draft.

Verified page layouts

These 9 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• The practice ↗practice.html
• Eyewear ↗eyewear.html
• Finch 48 ↗finch-48.html
• Eye care services ↗eye-care.html
• Eye examination ↗examination.html
• Your visit & questions ↗visit.html
• Contact & appointment enquiry ↗contact.html
• 404 ↗404.html

How optical enquiries work

The form prepares an email draft for review in the visitor’s own email application. Nothing is sent, saved or booked through the website. The demonstration recipient [email protected] must be replaced before launch.

Only listed frame and service query values are accepted. Submit starts hidden and disabled until the handler is installed; native email links remain available without JavaScript. Draft bodies retain multiline questions and clear after edits.

The form is for general questions only. It discourages symptoms, prescriptions, medical history and private clinical records. A real practice must agree an appropriate channel for those records and confirm appointment arrangements itself.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing, or Astro for shared layouts and source-driven content.
• Replace practice details, service information, opening/access facts and frame records with verified content. Obtain permission for replacement photography and product imagery. Confirm actual dimensions, finishes, prices and lens options with the operator.
• Edit frame data and FAQs in src/site.ts, original geometry in Frame.astro and handlers in src/browser.js. Keep shape/material/subject IDs aligned. Test all filter pairs, reset/empty states, colour announcements, allowed and rejected subjects, validation and edited-draft clearing.
• Replace imagery with licensed content. Keep responsive variants, intrinsic dimensions, alt text and ASSETS.md credits aligned.
• Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash for canonical/social metadata, robots.txt and a 8-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the entire HTML folder or Astro dist/. Configure unknown paths to return 404.html with HTTP 404. Test enquiries or configure a separately tested delivery route if direct sending is required.

No clinical advice, prescription or health-record intake, diagnosis, virtual try-on, checkout, stock availability, appointment backend or message-delivery service. A drawing or measurement does not establish a real fit or lens suitability.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Optical photographs by Ksenia Chernaya and Antoni Shkraba retain the Pexels License. Original frame drawings, identity, code and writing are MIT. Wren Serif and Sans are renamed Libre Caslon Text and Inter WOFF2 subset derivatives, with complete SIL OFL notices. Pexels License. Full asset credits.

Release verification

The page inventory, screenshots and download manifests document the included layouts and assets. The HTML and independent Astro editions contain the same design and license notices. Customization requires its own accessibility, content and performance checks.

Version 1.0.0, reviewed 30 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Wren is fictional. Frame names, dimensions, finishes, prices, services and visit details are illustrative; the original drawings are not verified products. Photos depict separate optical settings, not identified Wren clinicians, staff or premises.