# Free pharmacy website template

> Free HTML pharmacy website template with a walk-in clinic, vaccinations and a delivery round. AGENTS.md for Claude Code and Cursor, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Pharmacy website template: one free HTML file for an independent chemist, with weekly packs, a walk-in clinic, a vaccination table, a four-shelf shop, a bike delivery round and a repeat form. Each part is a pastel paper folder on a grey ground, filed under a header tab. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/hale/
- Live demo: https://8b.com/templates/hale/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/hale/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/pharmacy-website-template
- Download ZIP: https://8b.com/templates/hale/pharmacy-website-template.zip
- Template name in the repository: Hale
- At a glance: One 84 KB index.html with its CSS and JavaScript inside, 11 sections, 20 Unsplash photos credited in CREDITS.md, Gabarito and Geist from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/pharmacy-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/pharmacy-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/pharmacy-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/pharmacy-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my pharmacy: name, town, address, services (repeats, packs, clinic, jabs, shop, delivery), hours, delivery days and stops, team, how people order a repeat>. Replace first the name, Leeds address, hours, delivery stops, people, and the clinic and jab rules. Keep the section ids, the data-tab and data-step numbers and the three portraits; set the footer wordmark's --len to the new name's length. Ask me for missing facts; never invent prices, eligibility rules, hours, registration numbers or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/pharmacy-website-template my-site`.

## About

People who search for a pharmacy template or pharmacy web design usually run a counter that does more than dispense. This page covers weekly packs for people on four or more medicines, a walk-in clinic with four conditions, a vaccination table, a small shop, a delivery round and a repeat form. A travel health service, optician or dental practice can drop whatever it does not sell.

Give the agent the facts only the pharmacy has: name, address, hours, which conditions the clinic treats, who qualifies for each jab, delivery days and area, and the team. The demo invents all of them, NHS Pharmacy First wording included. Replace the pharmacy name, and set the footer wordmark's --len to match it. Vibe coding this in Claude Code is quick if the agent leaves the counts the animations are written for: four conditions with four photos, three people, and each shelf button tied to its panel by aria-controls.

If you are comparing templates for pharmacy sites, this is the right base when one counter offers several services and you want each filed as its own part of a single page. A business that sells timed classes, like a [class studio](https://8b.com/templates/hundred/), needs a different page shape. The weak spot is health data: the form sends nothing and asks for a date of birth. A no-code route exists too: 8B's builder designs a site from a sentence.

## Design

- Palette: #c9c9c7 (grey page ground and header bar, empty photo frames, the Visit tab of the questions), #ffffff (white sheets, the first header tab, question cards, text on the dark folders), #131313 (text, black bars and rules, table lines, the seal bar and the route fill), #d4e3f3 (pale blue: weekly packs folder, bedtime row, form fields, default button fill, Repeats tab), #f6d4dc (pink: clinic and vaccination folders, midday row, Clinic tab), #d1e8d9 (green: shop and delivery folders, evening row, the thank-you line, Shop tab), #fbefc4 (yellow: people and story folders, morning row, the form button, People tab), #575757 (dark grey: questions and contact folders, the Visit tab in the header)
- Fonts: Gabarito (headings, the big Walk in line, numbers in the pack grid and condition names at weight 500, links, and the wordmark at weight 400), Geist (body text, captions, table labels, small uppercase labels and form fields at weights 400 to 600)

Every part is a pastel paper folder; the clinic, shop, people and questions folders carry a slanted tab on top, set at their position in the six-tab strip of the fixed header. Sheets carry heavy black bars top and bottom, photos have a notched top edge, and tables use thick ruled lines. Clinic, people, story and contact split into two columns. The name sits in wide-spaced capitals in the header and as the huge footer line.

Pharmacy website design here is flat pastel blocks, pale blue, pink, green and yellow, cut with black bars. A thick rule draws along sheets as they enter, photos open from a small tab to the full frame, and buttons fill from below on hover.

## Sections and motion

- **Navigation** (navigation): fixed header: HALE wordmark with a caption, two quick links and a strip of six coloured file tabs that marks where you are. Motion: The tab of the section in view is raised as you scroll, and any tab rises on hover; both are CSS transitions that keep running with reduced motion.
- **Sealed by the week, sorted by the hour** (weekly-packs): first screen: headline about weekly packs, a paragraph, a button, a link, a photo of pill boxes and an example week grid. Motion: On load the intro lifts into place, the bars draw and the week grid fades in, then a black seal bar runs down the grid once and each row of pockets fills as it passes.
- **Seen today in the room behind the counter, with no appointment** (walk-in-clinic): folder with four photos that wipe over each other beside a column of four conditions, with a marker that steps down the list. Motion: Scrubbed with the scroll, a white marker steps down the four conditions and the matching photo wipes down over the one before.
- **Jabs by the season, given in the same room** (vaccinations): sheet with a photo and a table of four vaccines: who, when and a Book link. Motion: A thick bar draws along the sheet and the photo opens from its tab as they come into view.
- **The shop: four shelves chosen by our pharmacists** (shop): four shelf rows, one open at a time, each with a photo, a list of three things and a link. Motion: As the section comes up the four rows deal down from a stacked pad, and pressing a row opens its panel and closes the others.
- **Delivered by bike, Tuesdays and Fridays** (bike-delivery): delivery round: heading and paragraph, a route bar and five stops that slide sideways under the header. Motion: The stage is held under the header while the five stops slide sideways and the route bar fills, scrubbed with the scroll.
- **The people at the counter** (pharmacists): three portraits as slats that widen in turn beside three name cards (owner, clinic lead, counter). Motion: The three portrait slats widen in turn while the other two narrow, and the card beside each is ruled off with a bar.
- **Independent since 1987, and still nobody's branch** (independent-since-1987): the story of the shop as a letter with a photo of the shop dog. Motion: The photo opens from its tab and a bar draws along the letter.
- **Asked at the counter** (faq): seven questions as native details elements, each with a coloured tab naming its part of the pharmacy. Motion: The decorative tabs slide from the left edge of their rows into place while the list scrolls in.
- **1 Example Street, Leeds LS0 0AA** (contact): address, hours, phone, email and a shop-door photo beside the repeat order form. Motion: The photo opens from its tab and a bar draws along the repeat form.
- **Footer** (footer): footer with a large HALE wordmark, shop name and address, phone, five links, email and a legal line

## Good for

- independent pharmacy or chemist
- walk-in clinic, vaccination or travel health service
- small health, wellness or optician shop with a counter and local delivery
- any neighbourhood service that files its work in separate parts, such as a vet or a dental practice

## Questions

**Is this one of the free pharmacy website templates, and can I use it for a client?** Yes. It is one index.html under the MIT license, so a freelancer can build a pharmacy site for a client at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images. CREDITS.md lists photos and fonts.

**Does the repeat form send anything?** No. The script checks the fields, shows a thank-you line and clears the form; nothing leaves the page. Connect Formspree, Netlify Forms or your own secure endpoint and add a privacy notice, because the form asks for name, date of birth, phone and medicines, which is health data.

**How do I give this template to an AI agent?** Download index.html and AGENTS.md from the repository, put both in the project folder and ask Claude Code, Cursor or Codex to read AGENTS.md first. The prompt on this page works as the opening message. Edit the file itself, not a fetched page, which an agent receives as a summary.

**What must I keep when I rewrite the pharmacy copy?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, the six header tabs in order with the data-tab numbers on the sections, the data-step numbers that pair each clinic photo with its condition, and the footer wordmark's --len. The people animation is written for three portraits and three cards.

**How to create a pharmacy website like this without editing code?** Use [8B's AI website builder](https://8b.com/). You describe the site in a sentence and it designs a new one, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

**Can a US or Canadian pharmacy use it?** Yes, after a text pass. The layout suits any counter-based practice, but the demo is British: pounds, NHS Pharmacy First, a Leeds address and a 0113 phone number. Replace those, and the eligibility lines for the flu and Covid jabs, with your own region's rules.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Find us link in the header lead to #contact now; point them to keep, or a map link.
- Order a repeat link in the header, the Order a repeat button and the Ask about weekly packs link in the first part, and the four Book links in the vaccination table lead to #order (the repeat form in the contact section) now; point them to your online repeat-prescription or booking page, or keep #order once the form is connected.
- The tab strip in the header (Hale, Repeats, Clinic, Shop, People, Visit) lead to #packs, #packs, #clinic, #shop, #people and #contact (the first two tabs both go to #packs) now; point them to keep as anchors.
- Ask us to order something links under each of the four shop shelves lead to #contact now; point them to your shop enquiry page or email.
- Send to the counter button of the repeat form lead to the form has action="#order" and method="post"; section-script:contact checks the fields, shows the thank-you line and clears the form, nothing is sent now; point them to your form handler or prescription system, over HTTPS, with a privacy notice (the form asks for name, date of birth, phone and medicines).
- The repeat form asks for a name, a date of birth, a phone number and medicines, but sends nothing: the script only checks it and shows the thank-you line. Connect it to a secure endpoint and add a privacy notice before launch, because the data is health related.
- On phones (760 px and below) the header tab labels shrink to 10.5 px to fit six tabs in one row, and the Find us link is hidden.
- The bike delivery stage is held under the header for the full height of the screen minus the header, and has a minimum height of 520 px, so on windows shorter than about 630 px the held stage is taller than the screen.
- Photos are lazy-loaded from Unsplash, including the one on the first screen; self-host them before launch.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).