Barber Shop Template
A complete one-page site for a barber shop, built on an aubergine ground with heavy slab type, and a three-step booking flow with a running summary as its signature.
About This Template
A production-ready site for a barber shop that deliberately refuses everything the category usually does. There are no poles, no crossed razors, no gold script and no dark wood: the whole thing runs on an aubergine ground with oat type and one burnt orange accent, set in a heavy slab display face, so it reads as a modern graphic identity rather than a vintage pastiche.
Read the full template overview
The signature is the booking flow: a visitor picks a barber, then a service, then a slot, with the panel animating its own height between the three steps and a paper ticket alongside keeping a running summary of the choices and the price. Slot availability is read from the chosen barber's diary, so changing barber genuinely changes which times are free, and the final step issues a booking reference.
It is a front-end demo with no backend behind it, but every part of it behaves as though there is one. The copy is written for a fictional Newcastle shop in a dry, unsentimental voice, and the photography is bundled as art-directed WebP derivatives baked to a punchy, high-contrast, full-colour grade.
What's Included
- Complete deployable one-page site: nav, hero, price list, booking flow, barbers, the shop, hours and visit details, footer
- Signature booking flow: barber, service and slot chosen across three animated steps, with back and forward movement and nothing confirmed until the last screen
- Running summary ticket that updates as choices are made, works out the end time from the service length and totals the price
- Slot availability driven by the chosen barber's diary: change barber and the taken times change with it, releasing a slot that is no longer available
- Confirmation step issues a booking reference and lists what was booked, with a Book another control that resets the flow
- Book with this barber buttons on the barber cards fill step one in and drop the visitor onto the service step
- Built on native radio groups, so keyboard support comes from the browser: arrow keys move within a step, Enter moves the flow on, focus follows the step and a live region announces each one
- Bundled shop and barber photography baked to a punchy full-colour grade, around 600KB total
- Three-colour token block: change aubergine, oat and burnt orange and the whole site reskins
- Lenis smooth scrolling wired in and fully optional
- Accessible: the whole booking flow reads as three plain lists with a phone number when JavaScript is unavailable, and keeps working with no animation under reduced motion
Perfect For
- Barber shops, salons and grooming studios
- Tattoo studios, nail bars and piercing shops that book by artist
- Any appointment business where the customer picks a person, a service and a time
- Independent clinics and treatment rooms with a short price list
- Small venues that want a booking enquiry flow without a booking platform
How It Works
Structure
One script initialises each section with a single setup and teardown path and one motion branch, keyed only on reduced motion so exactly one branch runs on every device, and every section is guarded so a buyer can delete any of them.
The booking steps
The booking flow's entire data model is three native radio groups: without JavaScript all three render as readable lists, and with it the script hides all but one step and takes over the chrome. Moving between steps measures the panel, swaps the hidden attributes, measures again and tweens the panel between the two heights so the page below never jumps, while the incoming step slides and fades in.
Summary and availability
The summary is derived from the checked inputs rather than a parallel state object, so it can never disagree with the form; the end time is worked out by adding the service's data-mins to the slot's data-time. Each slot carries a data-taken list of barber keys, and the slot step re-reads it every time it is shown, disabling the times taken in that chair and releasing a chosen slot that is no longer available.
Focus and announcements
Focus moves to each step as it appears and a polite live region announces the step number and its prompt. Every JavaScript hook is a data attribute or a single plain class, and every masked reveal tweens the same transform property its CSS start state sets.
:root.
Try them in the preview above.
Questions about this template
Can customers actually book an appointment through it?
The flow is complete on the front end: a visitor picks a barber, a service and a slot, sees a running total, and gets a booking reference. There is no backend, so nothing reaches a real diary. Point the confirmation step at Fresha, Booksy, Calendly or a form handler and it becomes a genuine booking.
How do I change the barbers, services and prices?
They are plain HTML in index.html. Each barber is a card, each service a radio option carrying its length and price as data attributes, and the summary works the total and end time out from those. Adding a barber is copying one card; adding a service is copying one line.
Does changing barber change which times are free?
Yes, that is the point of it. Each slot carries a list of barbers it is taken for, so switching barber re-reads availability and disables the times taken in that chair, releasing a slot you had chosen if it is no longer free. Availability is a data attribute you edit, not a live diary.
What does someone see with JavaScript switched off?
The whole booking flow reads as three plain lists with a phone number, because it is built on native radio groups rather than custom controls. Nobody lands on a dead form, which matters more for a shop than for most sites: the phone is how most bookings arrive anyway.
The aubergine and orange is quite specific. Can I retone it?
Yes, from a three-colour token block: aubergine, oat and burnt orange. Be aware what you are changing though, the palette is the whole argument of the template, which deliberately avoids poles, razors, gold script and dark wood. A safer repalette keeps the boldness and moves the hue.
