# Salon Website Templates

> Salon and beauty website templates for barbers, nail bars, tattoo studios and skincare brands, with price lists, portfolios, artist pages and booking forms.

Canonical: https://gsapvault.com/templates/category/salon-beauty

Complete multi-page sites for barbers, nail studios, tattoo studios and beauty brands, where the customer is choosing a person, a colour or a product. Prices, portfolios and a booking step are designed in from the start rather than added at the end.

## What a salon or studio website needs to show

Salon customers book a person as much as a service. They want to see whose chair they will be in, what that person's work looks like, what it costs and when the next opening is. A gallery and a phone number leave all of that to a call. These templates run the people, the price list and the booking step through the whole site as one thread, so a visitor who likes someone's work is a click from booking them.

The barber shop template is six pages for any business where the customer books a person by name. Pull a colour tab down the hero and the page switches to that barber, and their colour follows them through the team page, their profile and a three-step booking flow that floods with it, where services they do not offer are struck through. Each profile has a turn-the-head viewer that shows one cut from the front, side and back.

The tattoo studio template is seven pages and knows what day it is: a live status bar says who is in and whether walk-ins are open, every artist carries a books badge, and a catalogue of painted designs shows which are still available to book. The booking form has a clickable front and back body map and a size slider with a price band from your own table, and the aftercare page has a scrubber from day one to day thirty.

The nail studio template is five pages for any business whose product is a colour or a finish. A photographed hand is painted coat by coat in the shade you pick, the page retints to match, and the choice rides into the booking form. The skincare template is seven pages for a brand with one hero product: the bottle is held in place while the page scrolls and a hand rises to catch it, then the site calms into a shop with a skin-need filter, a product page, a journal and a slide-out bag.

## How to make a salon template your own

Most of the work is people and prices, and both are kept where you can edit them without reading the animation code.

1. **Put your team in first:** In the barber template each person owns one colour token, and the profile page is built to be duplicated once per person. Add your people before anything else, because the rest of the site follows them.
2. **Write your real price list:** Price bands, treatment menus and the tattoo size price band all read from markup or a small table. Enter your own figures and the totals and booking summaries follow.
3. **Replace the portfolio photography:** Cut walls, catalogues and fresh-and-healed pairs are ordinary images. Swap in your own work at the same dimensions; the filters read tags in the markup, not the pictures.
4. **Connect the booking form:** Booking forms validate and confirm in place but send nothing. Point them at your booking platform, a form service or your CRM before taking real appointments.

```css
:root {
  --chair-1: #2f5bd3;  /* first barber */
  --chair-2: #e8622c;  /* second barber */
  --chair-3: #3f8f5a;  /* third barber */
}
```

## Salon & beauty at a Glance

| Template | What it does | Built with | Tone | Structure |
| --- | --- | --- | --- | --- |
| [Appointment Booking Template](https://gsapvault.com/templates/barber-shop-template) | Six-page site for any business where the customer books a person by name. | ScrollTrigger, Flip, Draggable, InertiaPlugin | mixed | 6 pages |
| [Beauty Salon Template](https://gsapvault.com/templates/nail-studio-template) | Five-page website template for any business whose product is a colour or a finish: nail studios and salons, hair colour, paint, tile and textiles. | ScrollTrigger | mixed | 5 pages |
| [Tattoo Studio Template](https://gsapvault.com/templates/tattoo-studio-template) | Seven-page tattoo studio website template that knows what day it is: a live status bar says who is in and whether walk-ins are open, every artist carries a books badge, and a catalogue of painted designs shows which are still available to book. | ScrollTrigger, Flip | dark | 7 pages |
| [Skincare Brand](https://gsapvault.com/templates/skincare-template) | A seven-page skincare brand website template for a beauty or wellness shop with one hero product. | ScrollTrigger | mixed | 7 pages |

## Templates in This Category

### Appointment Booking Template

Six-page site for any business where the customer books a person by name. Pull a colour tab down the hero and the page switches to that person, their colour following them through the team, their profile and a booking flow that floods with it. The demo is a three-chair barber shop in Deptford.

- Tier: premium · Difficulty: intermediate
- [View template](https://gsapvault.com/templates/barber-shop-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/barber-shop-template.md)

### Beauty Salon Template

Five-page website template for any business whose product is a colour or a finish: nail studios and salons, hair colour, paint, tile and textiles. A photographed hand is painted coat by coat in the shade you pick, and the shade fills half the page, the whole shades stage and every booking band, then rides into the booking form. Shown as a two-chair Brighton nail studio.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/nail-studio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/nail-studio-template.md)

### Tattoo Studio Template

Seven-page tattoo studio website template that knows what day it is: a live status bar says who is in and whether walk-ins are open, every artist carries a books badge, and a catalogue of painted designs shows which are still available to book. Shown as a six-chair Philadelphia shop; suits piercing studios, barbers, salons and any booking website.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/tattoo-studio-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/tattoo-studio-template.md)

### Skincare Brand

A seven-page skincare brand website template for a beauty or wellness shop with one hero product. A bottle is held in place while the page scrolls and a hand rises to catch it, then the site calms into a quiet grey shop with a range, a product page, a journal and a working slide-out bag.

- Tier: premium · Difficulty: advanced
- [View template](https://gsapvault.com/templates/skincare-template)
- [Clean Markdown for AI agents](https://gsapvault.com/templates/skincare-template.md)

## Related Guides

- [92 animated website templates built with GSAP (2026)](https://gsapvault.com/blog/interactive-website-templates) ([Markdown](https://gsapvault.com/blog/interactive-website-templates.md)): 92 animated website templates built with GSAP: portfolios, venues, shops, SaaS, and editorial one-pagers. Seven are completely free to download.
- [138 GSAP animation examples and demos with code (2026)](https://gsapvault.com/blog/gsap-animation-examples) ([Markdown](https://gsapvault.com/blog/gsap-animation-examples.md)): 138 GSAP animation examples with live demos and code: scroll, text, cursor, and canvas effects. Ten are completely free with copy-paste snippets below.

## Frequently Asked Questions

### Can clients book appointments or pay deposits through the site?

No. The booking flows are complete front ends: they validate the details, show taken times from demo diaries and confirm in place, but nothing holds a real slot, sends a request or takes a deposit. Connect the form to your booking platform, Formspree, Netlify Forms or your CRM; the tattoo template reads its endpoint from one attribute on the form.

### Will these work for a hair salon, lash or brow studio?

Yes. The barber template suits any business where customers book a named person, including hair salons and stylists. The tattoo template suits piercing studios and nail, lash and brow artists, using the status bar for walk-ins and an artist page per chair. The nail studio template suits hair colour and any business that sells a shade or a finish.

### Can I show my own portfolio?

Yes, and it is the part to spend time on. The barber template has a cut wall filtered by barber, the tattoo template a catalogue of designs with an available or tattooed status from one data file and fresh and healed pairs on each artist page. Replace the images with your own work and the filters keep working.

### Can I sell products as well as services?

The skincare template is built as a shop, with a product page, sizes, a quantity stepper and a slide-out bag kept through page changes. The bag is a front end: it holds and totals items but takes no orders, and its README shows where to hand the lines to Shopify, Stripe Checkout or your own platform.

## Related Categories

- [Gym Website Templates](https://gsapvault.com/templates/category/gym-fitness)
- [Commerce and Product Templates](https://gsapvault.com/templates/category/commerce-product)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt