doc-site
Operations

MediSpa booking

Edit clinics, treatments, deposits and booking availability for the Beauty Affairs MediSpa calendar.

MediSpa booking

The booking calendar reads its values from Shopify Admin, the theme editor, Sesami and Klaviyo. Find the owner in this table before you edit anything.

ValueOwner
Clinic name, address, phone, opening hoursShopify Admin, medispa_locations metaobject
Treatment price, deposit, pay-in-clinic amountShopify Admin, product and product metafields
Which treatments a page offersTheme editor, Services Overview section
Deposit wording and default amountsTheme settings, Medispa Deposit
Availability messages and booking toastsTheme settings, Medispa
Actual appointment availabilitySesami app
Lead capture form fieldsKlaviyo

Edit a clinic

  1. Open Shopify Admin, then Content, then Metaobjects.
  2. Open the medispa_locations type.
  3. Edit the clinic entry.
FieldWhere it appears
display_nameClinic tab label and the confirmation step
addressClinic details panel
display_phone_numberClinic details panel, shown to the customer
phone_numberThe number the call button dials
store_hoursOpening hours in the clinic details panel
  1. Save.

Adding a clinic here makes it selectable in the calendar. It does not create appointment availability. Set that up in Sesami as well, or the new clinic will show a calendar with no bookable slots.

Change a treatment's deposit or pay-in-clinic price

Deposit behaviour is set per product with metafields, with a theme-settings fallback.

  1. Open the treatment product in Shopify Admin.
  2. Scroll to Metafields.
MetafieldEffect
custom.pay_in_store_amountTotal shown on the Pay In Clinic button for this treatment
custom.enable_pay_in_storeTurns the Pay In Clinic option on or off for this treatment
custom.enable_checkoutTurns the pay-a-deposit-now option on or off. Leave it unset on older products, which the calendar treats as enabled.
  1. Save.

A landing page can override every product on it. Setting a custom.pay_in_store boolean metafield on the page forces Pay In Clinic on or off for all treatments rendered by that page, including an explicit false. Use this sparingly, because it is easy to forget the page is doing it.

When a product carries no custom.pay_in_store_amount, the calendar falls back to the Pay In Store Label Price in Theme settings, then to the Services Overview block's own label price.

Change the deposit amount and cart wording

  1. In the theme editor, open Theme settings, then the Medispa Deposit group.
FieldWhat it does
Deposit AmountDefault deposit in dollars when a product has no deposit of its own
Pay In Store Label PriceFallback total for the Pay In Clinic button
Cart MessageLine shown against a MediSpa booking in the cart
Remaining Amount Line Item LabelLabel for the balance owing on the booking line
Remaining Amount Line Item ValueTemplate for that balance
TimezoneTimezone used to interpret appointment times
  1. Save.

Changing Timezone shifts how every appointment time is read. Change it only if the clinics move timezone, not to correct a one-off display problem.

Change which treatments a page offers

  1. In the theme editor, open the MediSpa page.
  2. Select the Services Overview section.
  3. Edit its medispa_service blocks. Each block points at one treatment product and can carry its own Pay In Clinic label price.

The calendar shows the treatments from the section that contains the Book Now button. Two Services Overview sections on one page give two different treatment lists. This is intentional. If a button opens the wrong list, check which section contains it.

Change availability messaging

These settings control the urgency messaging around the calendar. They do not change real availability, which Sesami owns.

  1. In the theme editor, open Theme settings, then the Medispa group.
FieldWhat it does
Show Booking AvailabilityMaster switch for the remaining-slots messaging
ModeWhether the counts come from real data or are demonstrated on a timer
Decrement Timer Minimum, MaximumSeconds between simulated decrements
Booking TimeframeHow many days ahead the calendar offers
Show bookings relative toWhether the timeframe starts today or from another anchor
Low Availability Threshold, CopyWhen to show the low-availability line and what it says
Show Booking ToastsMaster switch for the recent-booking toasts
Toast Lifespan, Total Visible ToastsHow long a toast stays and how many show at once
Booking Toast CopyThe toast text
  1. Save.

When Mode is set to the simulated option, the counts go down on a timer and have no connection to real bookings. Confirm which mode the live theme uses before telling anyone the numbers are real.

Change the lead capture form

The booking form is a Klaviyo form. The theme only holds its ID.

  1. Edit the form itself in Klaviyo.
  2. If the form ID changes, open the theme editor, then Theme settings, then Medispa, and update Medispa Booking Form ID and Medispa Booking Mobile Form ID.

Medispa Booking Form Submit URL in the same group is the Zapier webhook that receives the booking intent. Change it only alongside the matching change in Zapier, or bookings will stop reaching whatever Zapier feeds.

Verify the change

  1. Open a MediSpa treatment page in a private window.
  2. Click Book Now. The calendar should open with your clinics as tabs.
  3. Pick a day and a time. Availability comes from Sesami, so an empty calendar points at Sesami rather than at the theme.
  4. Continue to the confirmation step and check the deposit and Pay In Clinic amounts.
  5. Submit the form and confirm the cart line carries the deposit and the balance-owing label.

If the calendar does not open, follow Booking calendar will not open.

Developer map

ConcernSource
Calendar configuration from Liquidsnippets/medispa-calendar-config.liquid
Calendar mount pointsnippets/medispa-calendar-placeholder.liquid
React entry pointsrc/entrypoints/medispa-calendar-react.tsx
Calendar components and statesrc/components/medispa-calendar/
Book Now button wiringsrc/entrypoints/medispa-booking-actions.ts
Sesami, Klaviyo and Zapier payload typessrc/@types/calendar.ts
Treatment list sectionsections/overview-services-grid.liquid
Deposit and availability settingsconfig/settings_schema.json, Medispa and Medispa Deposit groups

Architecture behind the flow is in MediSpa booking.

On this page