Restyling the NEUAGE booking experience to match the brand.

Two layers do all the work

Zenoti Webstore V2 is a React app, so you don't edit page files directly — you configure it from the admin template. Two sections matter: Branding Look & Feel (native color + font controls, no code) carries roughly 80% of the visual change, and Styling & Custom CSS (a Custom Header HTML field) carries the rest. Set the colors first, then layer the header, banner, and CSS polish on top.

Map the palette to the color pickers

Expand Branding Look & Feel and set each color field below. Field labels vary slightly by Zenoti version — match by meaning, not exact wording. The intent: a deep-teal primary action color for a premium feel, teal for secondary actions, aqua reserved for selected/active states, and a soft surface behind white service cards.

Load the NEUAGE type system

Still inside Branding Look & Feel, set the two font fields. This swaps Zenoti's default font for DM Sans site-wide and loads DM Serif Display so the custom header and banner can use it.

https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap

'DM Sans', sans-serif

Branded header + CSS polish

Expand Styling & Custom CSS and paste the block below into the Custom Header field. It renders a clean NEUAGE bar at the top of every booking page and carries an embedded <style> block for the rounded cards, button radius, and hover lift the color pickers can't set.

<div class="neuage-store-header">
  <a href="https://www.neuagehealthwellness.com/" class="nsh-brand">
    <svg viewBox="0 0 80 86" class="nsh-hex" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(0,5)">
        <polygon points="40,38 40,0 73,19" fill="#3ababb"/>
        <polygon points="40,38 73,19 73,57" fill="#2d9c9a"/>
        <polygon points="40,38 73,57 40,76" fill="#0f6461"/>
        <polygon points="40,38 40,76 7,57" fill="#0d4845"/>
        <polygon points="40,38 7,57 7,19" fill="#5abab9"/>
        <polygon points="40,38 7,19 40,0" fill="#91efed"/>
      </g>
    </svg>
    <span class="nsh-word">NEU<b>AGE</b><i>Health + Wellness</i></span>
  </a>
  <a href="tel:+10000000000" class="nsh-phone">Call to book</a>
</div>

<style>
  /* ── NEUAGE branded header bar ── */
  .neuage-store-header {
    display:flex; align-items:center; justify-content:space-between;
    background:#0d2e2e; padding:14px 28px; border-bottom:3px solid #5abab9;
    font-family:'DM Sans',sans-serif;
  }
  .nsh-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
  .nsh-hex { width:34px; height:37px; }
  .nsh-word { color:#fff; font-weight:700; font-size:18px; letter-spacing:.04em; }
  .nsh-word b { color:#45e9e5; font-weight:700; }
  .nsh-word i {
    display:block; font-style:normal; font-weight:400; font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px;
  }
  .nsh-phone {
    color:#5abab9; text-decoration:none; font-size:13px; font-weight:600;
    letter-spacing:.06em; border:1px solid rgba(90,186,185,.4);
    padding:8px 16px; border-radius:7px; transition:all .2s;
  }
  .nsh-phone:hover { background:#5abab9; color:#0d2e2e; }

  /* ── Webstore polish — verify the selectors against your live page (Step 5) ── */
  /* Smooth out card corners + add a subtle hover lift on service cards */
  [class*="serviceCard"], [class*="ServiceCard"], [class*="service-card"] {
    border-radius:12px !important;
    transition:transform .2s ease, box-shadow .2s ease !important;
  }
  [class*="serviceCard"]:hover, [class*="ServiceCard"]:hover, [class*="service-card"]:hover {
    transform:translateY(-2px) !important;
    box-shadow:0 8px 22px rgba(13,46,46,.10) !important;
  }
  /* Rounder buttons everywhere */
  button, [class*="button"], [class*="Button"] { border-radius:8px !important; }
</style>

Frame the page top and bottom

A branded banner above the service list and a simple footer below it are what make the examples you shared feel like a real storefront rather than a bare booking widget.

Point this at a hosted banner around 1900×420px — deep-teal background, hex motif, and a line like "Book your visit at NEUAGE Health + Wellness." Host it in your WordPress media library (WP Engine) and paste the resulting URL. You already produce assets at this exact width, so it'll match the rest of your collateral. I can generate the banner for you on request.

<div style="background:#1a1a1a;padding:22px 28px;text-align:center;font-family:'DM Sans',sans-serif;border-top:2px solid #5abab9;">
  <div style="color:#5abab9;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;">NEUAGE Health + Wellness</div>
  <div style="color:rgba(255,255,255,.4);font-size:11px;margin-top:6px;letter-spacing:.04em;">
    Des Peres · Ladue · Lake St. Louis · Sarasota · Leawood · Spanish Fort
  </div>
</div>

Verify the CSS hooks in 60 seconds

The color and font work above is reliable. The handful of CSS rules in the Custom Header that target cards and buttons use broad pattern-matching, since Zenoti's class names are generated and I can't read them from outside. Confirm them once against your live page:

1. Open your booking page in Chrome on desktop.
2. Right-click a service card → Inspect. The element panel highlights the card's HTML.
3. Read the class="..." on that element (e.g. card_wrapper_x9f2). The stable part is the readable prefix.
4. If your real class doesn't contain serviceCard or service-card, add a line using your prefix, e.g. [class*="card_wrapper"] { ... }.
5. Re-paste the updated header, Preview, then Publish.

Where this lands

A simplified preview of the styled booking page — branded header, deep-teal banner, soft surface, white cards with deep-teal CTAs, and aqua reserved for active states.