Barber Shop Template 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. 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
One script initialises each section inside a single gsap.context with gsap.matchMedia, 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 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. 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 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.