> ## Documentation Index
> Fetch the complete documentation index at: https://opencals.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Frisor — barbershop booking template

> Free, open-source barbershop booking website template. Next.js 15, Stripe checkout, staff and multi-location booking, add-ons, customer accounts — built on the Opencals Storefront API.

A complete barbershop booking website you can clone and deploy today. Frisor is
the barbershop counterpart to [Haar](/open-source/haar): same
[Storefront API](/api-reference/introduction) and typed
[TypeScript SDK](/guides/storefront-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.

<CardGroup cols={3}>
  <Card title="Live demo" icon="external-link" href="https://template-frisor-sage.vercel.app">
    template-frisor-sage.vercel.app
  </Card>

  <Card title="Source code" icon="github" href="https://github.com/letsopencals/template-frisor">
    letsopencals/template-frisor (MIT)
  </Card>

  <Card title="Deploy to Vercel" icon="rocket" href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-frisor">
    One-click deploy
  </Card>
</CardGroup>

<Frame caption="Frisor — landing page">
  <img src="https://raw.githubusercontent.com/letsopencals/template-frisor/main/docs/homepage-hero.png" alt="Frisor barbershop booking website template — landing page" />
</Frame>

<Frame caption="Booking flow with add-ons and live summary">
  <img src="https://raw.githubusercontent.com/letsopencals/template-frisor/main/docs/booking-extras.png" alt="Frisor template booking flow with services, barber, time slots and add-ons" />
</Frame>

## 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

<Steps>
  <Step title="Clone and install">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    git clone https://github.com/letsopencals/template-frisor.git
    cd template-frisor
    npm install
    ```
  </Step>

  <Step title="Add your API key">
    Create a store in the [Opencals dashboard](https://opencals.com), grab a
    Storefront API key (see [Authentication](/authentication)), and set it in
    `.env.local`.
  </Step>

  <Step title="Run it">
    ```bash theme={"theme":{"light":"github-light","dark":"github-dark-default"}}
    npm run dev
    ```

    Your shop's real services, barbers, and availability render immediately.
  </Step>

  <Step title="Deploy">
    Push to your own repo and
    [deploy to Vercel](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fletsopencals%2Ftemplate-frisor),
    or host anywhere Next.js runs.
  </Step>
</Steps>

## 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](/guides/build-a-booking-page) to understand
the API calls behind each screen.