Frisor — barbershop booking template - Opencals Developer Docs

A complete barbershop booking website you can clone and deploy today. Frisor is the barbershop counterpart to Haar: same Storefront API and typed TypeScript SDK underneath, a different vertical and a dark editorial design. Every screen — services, barber picker, time slots, add-ons, cart, checkout, customer account — is built with the public API.

Live demo

template-frisor-sage.vercel.app

Source code

letsopencals/template-frisor (MIT)

Deploy to Vercel

One-click deploy

Frisor barbershop booking website template — landing page — Frisor — landing page

Frisor template booking flow with services, barber, time slots and add-ons — Booking flow with add-ons and live summary

What’s inside

Feature	Notes
Service catalog	Driven by the Products + Product Collections endpoints — Classic Cut, Beard Trim, Hot Towel Shave, Cut + Beard, Kids Cut
Barber & multi-location booking	Staff Members + Locations endpoints — three shops out of the box
Real-time availability	Appointments endpoints
Add-ons at checkout	Add-On endpoints — hot towel finish, beard oil, eyebrow trim, in one transaction
Cart & Stripe checkout	Cart + Checkout + Payment endpoints, deposits supported
Customer accounts	Self-Service endpoints — bookings, reschedules, cancellations
Stack	Next.js 15, TypeScript, Tailwind v4, `@opencals/storefront-sdk`

Get started

Clone and install

git clone https://github.com/letsopencals/template-frisor.git
cd template-frisor
npm install

Add your API key

Create a store in the Opencals dashboard, grab a Storefront API key (see Authentication), and set it in .env.local.

Run it

npm run dev

Your shop’s real services, barbers, and availability render immediately.

Deploy

Push to your own repo and deploy to Vercel, or host anywhere Next.js runs.

Make it yours

The template is MIT-licensed: rebrand it, restructure it, or use it as a starting point for client work. Every colour and font is a CSS variable — the deep-green-and-gold palette and the Fraunces display font are defined in one @theme block. Agencies can run one codebase against multiple stores — each deployment just points at a different API key. To go deeper than theming, follow the booking page tutorial to understand the API calls behind each screen.

Last modified on June 16, 2026

Haar — salon booking template

Live demo

Source code

Deploy to Vercel

​What’s inside

​Get started

​Make it yours

What’s inside

Get started

Make it yours