DEV Community: Kyle Kaplan

How a Salon Website Gets Built in Lovable: A Build Walkthrough

Kyle Kaplan — Thu, 29 Oct 2026 04:31:58 +0000

Originally published at https://kaplanbusiness-kaplanbusiness24-9720.vercel.app/lovable-guide-2.html — republished here by Kaplan Business.

A companion to How we build salon websites on Lovable. That guide covers what Lovable is and why we build on it. This one walks through the actual build — prompt by prompt, section by section — using our public demo, Glow Studio, as the example.

Open the demo alongside this guide

Open the demo alongside this guide: glow-studio-demo.lovable.app. Every section below maps to something you can see on that page.

Start with the prompt, not the builder

The first prompt decides most of the outcome. A vague prompt — "make me a salon website" — produces a vague site: placeholder services, no prices, a booking button that goes nowhere. A good first prompt reads like a brief for a new hire. It answers, in plain language:

What the business is: a hair and beauty salon in Denver, warm and welcoming, not luxury-cold.
What it sells: the real service list, with real prices and durations.
What the visitor should do: pick a treatment and book, or call.
How it should feel: the tone of the shop itself — in the demo's case, "a little self-love," not a price list with a logo.

Here is the shape of a first prompt that works. Bracketed parts get swapped for the real business:

Build a mobile-first website for [salon name], a [hair/beauty/spa] salon in [city]. The tone is [warm and welcoming / modern and minimal / bold and trendy]. The hero should make one promise — [e.g., "Look radiant, feel unstoppable"] — and offer one clear next step: book now. Include a services section with these services, prices, and durations: [list them]. Include a booking section where visitors pick a treatment and a day. Include a reviews section with [real review quotes]. Include an about section in the owner's voice, and a visit section with address, phone, and hours. Use real copy throughout — no placeholder text.

That is one prompt, not ten. The structure, the copy, and the booking path all come out of it together, which is why the first version already reads like a business instead of a template.

The sections that matter, in order

A salon site has one job: turn a search into an appointment. Every section earns its place by helping that happen. This is the order that works, and why:

1. Hero: one promise, one action

The demo opens with "Look radiant, feel unstoppable," a warm photo of the salon, and the line "Hair, beauty & a little self-love." One promise, one photo, one feeling. A visitor knows within seconds whether this is their kind of place. If the hero tries to say everything — services, prices, history, awards — it says nothing, and the visitor bounces.

2. Services with prices and durations

This is the section that does the most selling, and the detail most salon sites get wrong is leaving one of the two numbers out. The demo lists both for every service: Haircut $45+ and 45 minutes, Balayage $140+ and 2.5 hours, Bridal Package $199+ and 3 hours. Price answers "can I afford this"; duration answers "how long will I be there." A caller who already knows both is a caller who books. The demo also carries one honest line underneath — "All prices are starting prices. Your stylist will personalize your service at your consultation" — which is the kind of sentence that prevents awkward chair-side conversations later.

3. The booking path: pick a treatment, pick a day

The demo's booking section says it plainly: "Your next good hair day starts here. Pick your treatment and a day that works for you." That is the whole flow, and it is the part to test hardest. On a real client site, this section connects to the booking system the business already uses — Vagaro, Booksy, Square, GlossGenius, Acuity, and others — so the visitor ends up booking a real appointment, not filling in a form that goes nowhere.

How that connection works depends on the booking system: some connect with an embedded widget, others by linking out to the business's booking page. Either way, the test is the same — a visitor must end up booking a real appointment, not hitting a dead end.

Note the demo is honest about itself here: it carries a line saying the form is a demo form and no appointment requests are sent or saved. On a client site, that line comes out and the real booking flow goes in. Never ship a booking button that leads to a dead end — a dead booking path loses more customers than having no website at all, because the customer already decided to buy.

4. Reviews, placed after the services

The demo's reviews sit under the heading "The love is mutual," with three quotes naming the service each guest had — balayage, haircut and color, bridal beauty. Placement matters: reviews work best right after the visitor has seen prices, because that is the moment doubt shows up ("is it worth $140?"). A review attached to a specific service answers that doubt better than a star rating floating in the header.

On a client site, these are the business's real reviews, used with permission — never invented quotes. The demo's quotes are demo content for a fictional salon, which is fine for a demo and not something to copy onto a real business's site.

5. About, short and in the owner's voice

"A space to unwind. A place to be you." The demo's about section is four short paragraphs: what the studio believes, what it feels like, who it is for. It does not list credentials or awards. Salon customers choose a stylist the way they choose a friend — by feel — so the about section should sound like the owner talking, not like a brochure.

6. Visit info: address, phone, hours, nothing else

The demo closes with the practical block: 123 Main Street, Denver, a phone number, Mon–Sat 9am–7pm, Sun 10am–4pm. On a phone, the number should be tap-to-call, and the address should open a map. This section looks boring and converts more visitors than any other part of the page after services, because it answers the last three questions before someone walks in: where, when, and how do I reach you.

Iterating: from first draft to client-ready

The first version is never the shipped version. The useful way to iterate is one specific change per message, naming the section and the reason:

"In the services section, add durations next to every price — customers keep asking how long each service takes."
"The booking button on mobile sits below the fold. Move it into the hero so it's visible without scrolling."
"Replace the generic salon photo in the about section with the owner's real shop photos."
"The reviews section quotes a service we no longer offer. Swap it for a recent balayage review."

Small, specific follow-ups beat long rewrite requests, because each one can be checked: did that section change, and did it change the way a customer experiences it? After each round, test the site the way a customer would — on a phone, starting from a search, trying to book. The checklist we run before calling a site done:

☐ A stranger can find a price for the service they want in under a minute.
☐ A stranger can reach the booking step from the hero without scrolling or hunting.
☐ The booking step ends in a real appointment, a real call, or a real form — never a dead end.
☐ Prices, hours, phone number, and address are the business's real ones, not demo text.
☐ Nothing on the page is placeholder copy, and no link points somewhere the business does not own.
☐ The site reads cleanly on a phone: no sideways scrolling, no text too small to read, no button too small to tap.

That last point is where most first drafts fail. A salon's customers arrive on phones, so a site that only looks right on a desktop is a site that fails its main audience. Check mobile first, every round.

Common first-draft problems, and the fix

Placeholder text survives into the draft. Fix: feed real content in the first prompt — services, prices, hours, reviews — instead of asking for a structure to fill in later.
Prices missing or buried. Fix: prices and durations in the services section, in the open, on the first version. Hiding prices does not create more calls; it creates fewer.
A booking button that goes nowhere. Fix: connect the real booking system before launch, and test the full path on a phone. A demo form is fine for a demo; it is not fine for a client.
Generic tone. Fix: rewrite the hero and about sections in the owner's words. If the copy could belong to any salon in any city, it belongs to none of them.
Links pointing nowhere. The demo's social icons, for example, point to the social platforms' homepages rather than a real profile. On a client site, every icon links to the business's real profile or comes off the page.

Before launch: swap every demo detail for a real one

The demo is a fictional salon — a made-up address, a placeholder phone number, demo reviews. That is what makes it a safe example. A client build ends with the opposite pass: every demo detail replaced with the business's own facts, the real booking system connected, real photos in place of stock, real reviews with permission. The structure stays; the content becomes theirs. That is the moment a generated site becomes their site.

Photos come from the business: attach real shop photos to the first prompt or upload them in the editor. Stock photos are placeholders, not the finished site.

Publishing is the last step: press Publish in Lovable and the site goes live on its lovable.app address. For a custom domain, go to Project → Settings → Domains (or Add domain in the Publish dialog) — Lovable shows the exact DNS records to add, provisions SSL automatically, and custom domains need a paid plan.

And if a change makes things worse, you don't start over: Lovable saves every change as a version. Open History from the top bar, preview any version, and hit Revert (it asks you to confirm first) to restore the project to that version — newer versions stay available, so reverting never deletes your later work.

What this means for your salon

If you run a salon, barbershop, or spa, the takeaway is not that AI builds your website. It is that a good website is a content job first and a build job second: real services, real prices, a booking path that works, and reviews from real guests. Lovable compresses the build from weeks to days. The judgment — what to say, what to charge, how booking should feel — is still the work, and it is the work we do with the owner before and after the generation step.

See the companion guide for the full picture — How we build salon websites on Lovable — browse the Glow Studio demo like a customer, and if you want one built for your shop, tell us about your business. We reply within one business day, and we show you what yours would look like before you pay anything.

Kaplan Business — Websites & automations for local businesses.

kaplanbusiness24@gmail.com · +1 (516) 522-4040 · Long Beach, NY

How We Build Salon Websites on Lovable

Kyle Kaplan — Thu, 29 Oct 2026 04:30:55 +0000

Originally published at https://kaplanbusiness-kaplanbusiness24-9720.vercel.app/lovable-guide.html — republished here by Kaplan Business.

A practical guide to the exact process we use at Kaplan Business: from a blank page to a live, mobile-first website for a local business — in days, not months.

See the demo site we built

What Lovable is

Lovable is an AI website builder: you describe the site you want in plain language, and it generates a working website — pages, layout, styling, and content — that you can then refine, also in plain language. No code required to start, and no waiting weeks for a first draft.

For a local business, that speed matters. A salon losing bookings to a competitor with online booking does not need a three-month agency project. It needs a real site, live, this week.

Why we build client sites on it

Speed: a first working version exists on day one, so the owner reacts to something real instead of approving wireframes.
Cost: less hand-coding means a $497 website is possible without cutting the parts that win customers: booking, services, reviews, and mobile layout.
Changes in plain language: after launch, the owner can ask for updates the way they would ask a person — "add a bridal page," "change the Saturday hours" — instead of filing a ticket with a developer.
No lock-in: the client owns their site and domain outright. We build it, they keep it.

The demo: Glow Studio

Our public demo is a full salon site built on Lovable, and it is the template every client build starts from: services and pricing, gallery, about, contact, and online booking — mobile-first, because most salon customers arrive on their phones.

Open the Glow Studio demo and browse it like a customer. That is the standard a client site has to meet before we call it done.

Our build process, step by step

1. Map the business first. Before touching the builder, we collect the facts that actually win bookings: services and prices, hours, location, photos, reviews, and which booking system the business already uses (Vagaro, Booksy, Square, GlossGenius, Acuity, and others).

2. Generate the structure. We prompt Lovable with the business's real content — not placeholder text — so the first version already reads like their business, with the right pages and sections.

3. Refine against a checklist. Mobile layout, booking path, load speed, Google Business Profile links, review links, and contact forms. We test the booking flow the way a customer would, on a phone, before anything ships.

4. Launch and hand over. The site goes live on the client's domain, with two revision rounds included. Ongoing updates and hosting are covered by our Care Plan, and clients who want the front desk automated can add missed-call text-back, reminders, and review requests.

Who this is for: salons, barbershops, spas, and studios that either have no website or have one that does not take bookings. If your site cannot turn a search into an appointment, that is the problem we fix first.

What it costs: our Website package is $497 one-time, live in about 7 days. See the full menu on our services page.

What Lovable is not

It is not magic, and it is not a substitute for knowing the business. An AI builder fed with vague input produces a vague site. The work that makes a client site good — real services, real prices, a booking path that actually works, photos of the real shop — is the work we do before and after the generation step. Lovable compresses the build; it does not replace the judgment.

Try it yourself

If you run a local business, start with the demo, then tell us about your shop. We reply within one business day — and if Lovable is the right tool for your site, we will show you exactly what yours would look like before you pay anything.

Part two walks through the actual build, prompt by prompt: How a salon website gets built in Lovable.

Tell us about your business

Kaplan Business — Websites & automations for local businesses.

kaplanbusiness24@gmail.com · +1 (516) 522-4040 · Long Beach, NY