How a salon website gets built in Lovable.

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:

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.