How to edit your salon website, team page and profile

The public website is the salon’s own: its home page, blog, questions, About page, contact page, legal pages and team page, in the theme chosen under Appearance. Clients can book on it once you take bookings online (see Booking online), and buy from your shop once something is on sale (see The shop).

Video tutorial #

How to change your salon website’s theme in Salon Booking OS by OsDot™ 1.0.0

Watch on YouTube

The Website group of the administration area holds every editor below. It needs the permission Edit website pages, blog, menus, homepage sections and gallery — the owner’s; a manager only if the owner grants it (Roles and permissions). The People group needs Manage staff members, except People → Roles and permissions, which only the owner opens.

The home page #

A new site’s home page shows its sections in this order, each only once it has something to show:

1. The slides — the slideshow (below).
2. Popular right now — up to six of the services clients can book online, as cards, with their pictures when they have them.
3. Services & prices — those services by category, with their time and price. While you offer home visits, it names the areas you visit and the travel fee.
4. Salon care at home — products from your shop: those marked Featured on the homepage, or else the first ones, with See all products. It shows only while something is on sale (see The shop).
5. Recent work — the three pictures set under Appearance → Images. It stays hidden until you add them. The themes ship no sample pictures for it: show the salon’s own work only.
6. Our team — the published team profiles (below).
7. Visit us — your opening hours with today marked and the closures of the next 14 days, your address, phone and e-mail, Get directions, and the photo of your salon when you set one. It says that times are in the salon’s time zone.
8. Frequently asked questions.
9. Latest posts.

While you take bookings online, the services in Popular right now and Services & prices open the booking pages. While you do not, they only show your services and prices, with “To book, call us on …” when the Location has a phone.

Change the order, the headings and how many posts or questions show under Website → Homepage.

The header and the footer #

The header menu is yours, under Website → Menus. A new site starts with Home, Blog, About us (shown once your About page is published) and Contact us.

The header’s button:

• Book now while you take bookings online;
• otherwise Call to book, which dials the phone set on Salon → Location;
• Contact us when no phone is set.

Links the website adds by itself (they are not stored in your menus, so they go away again when their feature does):

• Services & prices, after the first item of the header menu, while you take bookings online;
• Shop, while something is on sale;
• My bookings, last, while you take bookings online, for clients to sign in with a code.

If you already put a link to the same address in your menu, yours is kept and the website does not add it twice.

The footer shows your address and phone, your footer menus, and Team sign-in for your team. Legal pages you list in the footer join its legal column. While something is on sale, the first column adds Shop; while you take bookings online, it adds Book online and Services & prices.

The slideshow #

The home page opens with your slides as a slideshow. Edit the slides under Website → Homepage; choose how they play under Website → Homepage → Slideshow settings.

• Slides. Each slide has a heading, an optional line above it, a short text, a main button and an optional second button, a picture for computers and an optional picture for phones, each with its focal point, and a description of the pictures for people who cannot see them.
• The first slide. The installer adds one slide, Welcome to the salon’s name, with a Contact us button. Change it, and add an About us button once your About page is published (until then that address shows “Page not found”).
• Buttons to your booking pages. A button is a label and an address. Once you take bookings online you can give a slide, for example, Book now with the address /book, and a second button to your prices, /services. Slide buttons do not follow Take bookings online: if you stop taking bookings online, change a button that leads to /book, which then shows “Page not found”.
• Style. Cinematic Drift (a new site’s style: a slow push-in and a soft change), Shutter, Big Word (one large word beside the picture) or Lens (a glow and a double exposure as the slides change). A slide may have its own style. Lens is the heaviest to draw: on a weak phone a tap during a Lens change can take noticeably longer, which is why a new site starts with Cinematic Drift.
• Height. Full screen, Tall (the default), Medium or Short. Time per slide 3 to 10 seconds (4 by default), the transition speed, the overlay that keeps the text readable, the text position (nine places) and the arrows on or off.
• What visitors get. With more than one slide: Pause first, then Previous, a dot per slide and Next. The slideshow moves on by itself and waits while the pointer is over it, while the browser tab is hidden and while it is scrolled out of view. Keyboard focus stops it until the visitor presses Play. Visitors who ask their device for reduced motion get the calm version: the slides still change by themselves, with soft cross-fades only, and Pause works as usual. The site’s Motion level (Appearance → Layout and motion: Off, Subtle or Cinematic, see Appearance: themes, colours and motion) decides how much moves.
• A slide without a picture of its own shows the theme’s hero picture: each theme brings one, an AI-generated illustration of a salon scene — never your salon, your clients or your staff. Replace it with your own under Appearance → Images, or give every slide its own pictures.

Slider pictures #

The pictures of your homepage slideshow are shown on every screen, from a phone held upright to a wide monitor. The slideshow crops each picture to fill its box, so give it two pictures per slide and tell it where the important spot is.

1. The computer picture. A landscape picture in the 16:9 proportion, 2560 × 1440 pixels (at least 1920 × 1080). Put the subject — a person, a chair, a product — in the right half. Keep the left half calm and a little darker: that is where the headline and the buttons sit. Keep faces well inside the picture, away from all edges, and keep the bottom part free: a soft shadow is laid there for the text.

+----------------------------+
|  calm area    .   subject  |
|  for text     .   (right)  |
|  headline     .            |
|  [buttons]    .   ○○○ ‖ >  |
+----------------------------+

2. The phone picture (optional, recommended). A portrait picture in the 4:5 proportion, 1080 × 1350 pixels (at least 900 × 1125) — the same scene, framed taller. Put the subject in the upper half and keep the lower half calm for the text. Keep faces away from the edges and away from the very top. Without a phone picture, phones show a slice of the computer picture around its focal point.

+------------+
|  subject   |
|  (upper)   |
|............|
|  headline  |
|  [buttons] |
|   ○○○ ‖ >  |
+------------+

3. Set the focal point. After uploading, click the most important spot of each picture (a face, the product). The slideshow keeps that spot in view at every height and screen width.

3a. Mind the Short height. With the slideshow’s height set to Short, wide screens show less than half of the picture’s height. Short suits low, wide subjects — a counter, a row of chairs, a shelf, hands at work — not a standing person or a tall chair, which would be cut however the focal point is set.

4. Files. JPEG or WebP; up to 2 MB for the computer picture and 1 MB for the phone picture. No words or logos in the pictures — the slide’s own text is laid over them and stays readable on every screen.

5. People. Pictures may show stylists and clients in natural scenes. Generated people must never be presented as your real clients or staff; real photographs need the written consent of the people in them.

What the slide editor shows under the upload buttons (the same advice, word for word):

• Above the two upload buttons: Pictures carry no words or logos: the slide’s own text is laid over them and reads on every screen.
• Picture (computers and tablets): Landscape picture, 16:9 — 2560 × 1440 pixels recommended, at least 1920 × 1080. Put the subject in the right half and keep the left half calm and a little darker: the headline and the buttons sit there. Keep faces well inside the picture, away from all four edges and out of the bottom fifth. JPEG or WebP, up to 2 MB. After uploading, set the focal point on the most important spot (a face, the product): it stays in view at every height and screen width. With the Short height, wide screens show less than half of the picture’s height: Short suits low, wide subjects (a counter, a row of chairs), not a standing person or a tall chair.
• Picture for phones (optional): Portrait picture, 4:5 — 1080 × 1350 pixels recommended, at least 900 × 1125. Put the subject in the upper half and keep the lower half calm: the text sits there. Keep faces away from the edges and away from the very top, which short layouts trim. JPEG or WebP, up to 1 MB. After uploading, set the focal point on the most important spot. Without a phone picture, phones show the computer picture cropped around its focal point — a tall subject may then be cut.

A picture smaller than recommended, or far from its proportion, gets a warning under its upload button and in the homepage’s list (“Check the pictures”); a warning never refuses a picture.

Pages, blog posts and questions #

Website → Pages, Blog and FAQs list the entries with their state (draft, published, archived). Each entry has a title, an address made from the title, the text, and for pages and posts a cover picture from the media library and its description, and a search-engine title and description. The text editor offers headings, lists, links and tables; whatever is pasted, the website keeps only safe formatting (scripts and their like are removed when you save). A question’s title is the question; its text is the answer.

The About page (its card on the Website page) has its heading, an introduction, a few short sections, up to six figures, a button and a picture, and the option Show the photo of your salon on this page. Until it is published, /about shows “Page not found” and the menus leave it out.

The business profile and the photo of your salon #

Website → Business profile holds what the website says about the business, such as its public e-mail and social links. The address and the phone come from Salon → Location.

Under Photo of your salon, choose an upright photo of the outside or the entrance (4:5, at least 1080 × 1350 pixels) with its description and focal point. It shows on the contact page, in the home page’s Visit us, and on the About page if you tick its option.

Legal pages #

A salon publishes three: Terms & Conditions, the Cancellation Policy and the Privacy Policy. A new site has an unpublished draft of each under Website → Legal pages, written for a salon and opening with “REVIEW WITH YOUR OWN LAWYER BEFORE USE.” Nothing is published for you: have each draft reviewed by a lawyer who knows your country, fill in the [bracketed] parts, delete what does not apply, untick Sample text that still needs review — while it is ticked, a published page tells visitors its text still needs review — and publish it. Overview → Get started shows the step until all three are published.

• Create the starter drafts makes empty drafts of the other types (Disclaimer, Cookie Policy and the rest), ready for your text. It skips a type that already has a page, whatever its address, so your Cancellation Policy is not doubled.
• Every save is kept as a revision; the published one is what visitors read. Publishing asks for your password again.
• A legal page can be listed in the website’s footer.
• Agreements for online booking. Tick Visitors agree to it at booking on your Terms & Conditions and your Cancellation Policy (only these two can ask for agreement). Clients who book online then tick that they agree to them, and the agreement is kept with the appointment. The Privacy Policy informs and is never ticked: list it in the footer. Do not restate your cancellation hours in the text: the booking pages show them from your settings. Bookings made at the front desk ask for no agreement.

The contact page and its inbox #

/contact shows the business details (the address and phone from Salon → Location), the photo of your salon when set, a short text, the form and a map. Change the texts and the topics on the Contact page card of Website (the group’s first page). The form’s topics start as Booking an appointment, Prices and services, Feedback and Something else.

The map shows your address — or the map point set on the Business profile — on Google Maps, with Open in Google Maps. Paste a Google Maps embed URL only to show another place. The switch Ask visitors before loading the map (for privacy laws such as GDPR) is off on a new site: the map then loads with the page, and Google receives the visitor’s address and browser details, as any embedded map does. Turn it on where a privacy law asks for the visitor’s consent first.

Messages wait under Website → Enquiries, with their state and your private notes. Nobody is told when a message arrives — not even once your site’s e-mail is set up. Check the inbox yourself. The form limits how often one address or one e-mail address can send, and silently drops messages from robots.

The team on the website #

The team page (/team) and the home page’s Our team show the published profiles of the staff, in their order.

1. Under People, open the staff member (or Add a person without an account, kind Staff).
2. Under Links, choose their Staff record (the staff member under Salon → Staff). Their name now comes from the staff record: change it there, and the website follows. A linked profile’s name cannot be changed under People.
3. Under People → Team, give the profile a role, a short biography (bold, italics, links and lists), a photo with its description (optional) and its place in the order, and publish it.

Without a photo the profile shows the person’s initials. Only published profiles appear; an archived person never does. While you take bookings online, a profile linked to a staff record offers Book with and the person’s first name.

Your profile #

Every signed-in account has My profile in the account menu: the name, a phone number (private), a picture (private: only the account and the people who manage accounts see it; never stored in a browser’s cache) and a time zone. Dates and times on the account’s own pages are shown in that time zone; appointments are always in the salon’s time zone.

Under How you sign in, each person changes their own password and their sign-in e-mail (see Your team’s sign-ins).

Under Delete your account, Ask for deletion sends a request to the salon. The page says what happens: the salon reviews every request and replies; when it completes one, the sign-in is closed and the person’s name, e-mail address, phone number and any home address are removed from their appointments, their client record and the salon’s messages, while records the law requires the salon to keep, such as orders and payments, are kept.

People administration #

People lists every account and every person without one. Add a staff member gives a member of your team their own sign-in, with a setup link to hand over (see Your team’s sign-ins). People → Roles and permissions (the owner only) sets what each role may do (see Roles and permissions).

An account’s page shows its state (active or deactivated, with an optional reason; deactivating signs it out everywhere) and its roles. Only an account holding the owner’s role changes another owner’s state or roles, and at least one active owner always remains. Changing an account’s state or roles asks for your password again.

People → Deletion requests lists the requests with their state. Accept or decline each (a note is required to decline). An accepted request is completed on its page with Complete the deletion — see Clients and their data.