Skip to content
EN
Log in Sign up
Docs

Official resources

Hairsalon theme (hair and beauty salon)

Hairsalon theme (hair and beauty salon)

This is the manual for Hairsalon (hairsalon), the official Zittme theme for hair salons and beauty salons. It opens with a full-screen slider and continues with the service menu, designers, styles, salon information, and a booking call-to-action. Services and designers come straight from the Reservation module and salon information from the Branch module, so the first screen and the booking screens never drift apart. It layers a bronze accent over ink and ivory backgrounds, and the fonts are bundled with the theme, so no external CDN is used.

Demo: hairsalon-demo.zitt.me

Hairsalon demo

Components

ComponentLocationRole
Layoutthemes/hairsalon/layouts/hairsalonSite frame + first screen (slider, intro, services, designers, styles, salons, booking call-to-action)
Reservation skinthemes/hairsalon/modules/reservationService list, choosing salon/designer/date and time, booking confirmation, result, My bookings
Branch skinthemes/hairsalon/modules/branchSalon list (region filter), salon detail (business hours, closed days, map, amenities)
Board skinthemes/hairsalon/modules/boardPhoto style (lookbook), post list style (journal)
Member and message skinsthemes/hairsalon/modules/{member, communication}Login, sign-up, member info, messages
zittme Pay skinthemes/hairsalon/modules/zittme_payDeposit payment, payment result, bank transfer instructions

Installing and applying

  1. Install it from the store, or unzip it into themes/hairsalon.
  2. In Admin > Design settings, choose Hairsalon and apply it.
  3. Install the Reservation module and create a booking page (e.g., mid reservation), then enter /reservation in Layout settings > Basic > Booking page address. The top booking button and "Book with this designer" on designer cards link to this address.
  4. If you have several salons, register them with the Branch module. The theme works without the Branch module; only the salon information section on the first screen won't appear.
  5. To take deposits, install zittme Pay and turn on a payment method (bank transfer or PG).
    6. Recommended: Zittme 1.0.2 or later, Reservation 1.0.0 or later. Since this is a responsive theme, we recommend turning off the mobile-only view.

    First screen composition

    Set it on the First screen slider and First screen composition tabs of Layout settings. The site's front page (start menu) is treated as the first screen without any extra setting.

    SectionSettingsContent
    SliderSlides, advance interval, heightOne per line: `image-url \small-text \large-text \link. \n` inside the large text becomes a line break. Setting the interval to 0 turns off auto-advance.
    IntroIntro heading, body, signatureOne sentence and a short paragraph below the slider. If the heading is empty, the section is hidden.
    Service menuShow service menuGroups the services registered in the Reservation module by category and shows duration and price.
    DesignersShow designersShows the Reservation module's staff as horizontally scrolling cards. Without a photo, the first letter of the name is shown large.
    StylesStyle board address and count, lookbook photosIf you enter a board mid, it shows that board's photos; if empty, it shows the images entered in "Lookbook photos" as a mosaic. It shows photos in multiples of 5 so the mosaic fills without gaps (e.g., 5 out of 7).
    Salon informationShow branch informationShows salons from the Branch module with open/closed status.
    Booking call-to-actionClosing text, background imageThe booking button section at the very bottom of the first screen. If the text is empty, it is hidden.

    Colors and logo

    • Accent color: The default is bronze (#b08d57). When you change the accent color, the theme automatically picks the text color on buttons (white/ink) and the accent color used for text (labels, links), matching contrast so text stays readable even with a light color.
    • Logo: Without a logo image, the logo text is used; without that, the site title. Over the slider, the "Light logo image" is used.
    • Page types: Entering m in a sitemap menu class draws that menu like the first screen, and s draws it as a subpage.

    Booking screens (Reservation skin)

    1. Service list: Services by category, with description, duration, and price. Clicking a service moves to the booking steps.
    2. Salon, designer, date and time: Choosing a salon leaves only that salon's designers. Choosing "Any designer" assigns an available one. Days with no openings can't be selected, and if there are no days left this month, next month is shown first.
    3. Booking confirmation: Name, contact number, email, lookup password (guests), a note, and consent to personal information collection. If there is a deposit, "Pay and book" moves to the zittme Pay payment screen.
    4. Result and My bookings: Shows the booking number and status. Guests check it in My bookings with the booking number and lookup password. Members also see their points and coupons.

      5. Board

      Choose with the list style in board settings. If photos are the focus, use gallery (lookbook); if text is the focus, use journal (notices, journal). Guests can also leave comments with a nickname and password (depending on board permissions).

      Footer

      In Layout settings > Footer, enter business information (multiple lines with line breaks), social links (name | url), and the copyright text.