Beauty Affairs HK

Medispa booking

Change the treatment booking calendar, its deposit and pay-in-clinic options, and the clinic details shown beside it.

Three places in Shopify hold these values. Wording and store-wide amounts are theme settings. Per-treatment values are product metafields. Clinic addresses and hours are metaobject entries. Sesami owns availability, and you cannot edit it in Shopify.

Change clinic details

Go to Content > Metaobjects > Medispa locations. Each entry holds:

FieldShown where
display_nameClinic tab label and the treatment name shown to the shopper
addressClinic details panel beside the calendar
display_phone_numberClinic details panel
phone_numberThe number the panel dials
store_hoursOpening hours in the clinic details panel

Adding an entry adds a clinic tab to the calendar. The calendar matches a treatment to a clinic by looking for the clinic's handle inside the product handle. A new clinic only appears against treatments whose handles contain its handle.

Change deposit and pay-in-clinic amounts

Store-wide defaults are in Customize, gear icon, Medispa Deposit.

SettingWhat it does
Deposit AmountFallback deposit, in dollars
Pay In Store Label PriceFallback price shown on the pay-in-clinic button, in dollars
Cart MessageMessage shown against a deposit line in the cart
Remaining Amount Line Item LabelLabel for the balance owed, default Remaining Amount
Remaining Amount Line Item ValueAccepts {remaining_amount}
TimezoneUsed for slot times, set to Asia/Hong_Kong

These are fallbacks. A value set on the treatment replaces them. Set those under Products > [product] > Metafields.

MetafieldEffect
custom.pay_in_store_amountThe pay-in-clinic price for this treatment
custom.enable_pay_in_storeShows or hides the pay-in-clinic option
custom.enable_checkoutShows or hides the pay-a-deposit-now option. Leave it unset to keep the deposit option on
custom.klaviyo_booking_form_id_desktopDesktop booking form for this treatment
custom.klaviyo_booking_form_id_mobileMobile booking form for this treatment

One page-level override exists. Setting custom.pay_in_store on a landing page turns the pay-in-clinic option on or off for every treatment on that page, whatever each product's custom.enable_pay_in_store says. A value of false still counts as an override. To give control back to each product, delete the metafield from the page.

Enter every price in these settings in dollars, not cents.

Change booking form wording and routing

Customize, gear icon, Medispa holds the Klaviyo form IDs used when a treatment has none of its own. It also holds Medispa Booking Form Submit URL, a Zapier webhook that receives a copy of each Klaviyo booking form submission. Clearing that URL stops the copies. The form itself keeps working.

Medispa - Terms & Conditions Popup holds the title and description for the terms popup.

Business rules

A treatment only shows a calendar if it has the sesami-service tag. Without the tag, the page shows an ordinary product with a normal add to cart button.

The deposit option needs a selling plan from the Downpay app. If the product has no Downpay selling plan, the shopper cannot pay a deposit and only the pay-in-clinic option works.

For any cart line whose vendor contains medispa, the theme recalculates the remaining balance. If you change a product's vendor to something without medispa in it, the recalculation stops.

The calendar waits for the Sesami script before it shows anything. If Sesami is blocked or slow, the shopper sees an empty space and no error message.

Verify the change

  1. Open the treatment's page in a private window.
  2. Confirm the clinic tabs match the metaobject entries you expect.
  3. Pick a day and a time slot, and confirm both payment options show the amounts you set.
  4. Take one booking through to the cart. Check the deposit line, the remaining amount label and the cart message.
  5. If you changed a Klaviyo form ID, submit the form once and confirm the entry reaches Klaviyo.

If step 2 or 3 fails, see Booking calendar issues.

Developer map

ConcernSource
Config passed to the calendarsnippets/medispa-calendar-config.liquid
Where the calendar mountssnippets/medispa-calendar-placeholder.liquid
Calendar behavioursrc/components/medispa-calendar/CalendarRoot.tsx
Payment option logicsrc/components/medispa-calendar/CalendarConfirm.tsx
Shared statesrc/components/medispa-calendar/calendar-atoms.ts
Config and slot typessrc/@types/calendar.ts
Deposit selling plan lookupsections/product-calendar-config.liquid
Remaining balance rulesrc/entrypoints/mini-cart/internals/line-item-rules/remaining-amount-recalculation-rule.ts
How it fits togetherArchitecture: Medispa booking

On this page