Appointment Booking

What this section does

The full booking experience: pick a service, staff, date, slot and confirm

Where it goes

• Can be used as many times as you like on one page.
• This section comes with the Appointment System plugin.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Horizontal Steps

  Freewizard

  Step-by-step wizard with a horizontal progress bar

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Single Page

  Freesingle-page

  Calendar and slots side-by-side on one screen

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Vertical Steps

  Page Editorvertical-steps

  Calendly-style vertical step rail; completed steps collapse to summary

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Sidebar Summary

  Page Editorsidebar-summary

  Persistent booking summary panel beside a swapping content pane

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Inline Calendar

  Page Editorinline-calendar

  Calendar always visible with an inline time list — no steps

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Compact Widget

  Page Editorcompact-widget

  Condensed embeddable booking widget

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Concierge

  Page Editorconcierge

  Premium gradient summary rail with a live progress ring beside the active step

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Showcase

  Page Editorshowcase

  Immersive image-led service tiles + avatar staff strip + inline calendar

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Glass Wizard

  Page Editorglass-wizard

  Vibrant glassmorphism stepper on a gradient stage

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Accordion Flow

  Page Editoraccordion-flow

  Full-width accordion of step cards; the date step is a scrolling agenda of days with each day's times as inline chips (no month grid)

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Split Panel

  Page Editorsplit-panel

  One-screen split: service and staff rail on the left; the date step is a 2D timetable grid (times × days) on the right

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Ticket

  Page Editorticket-stub

  A live boarding-pass ticket beside a chronological departure board of the next available times (morning / afternoon / evening filters)

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Duo Panel

  Page Editorcalendar-duo

  Three-pane single view: a service/staff rail, the month calendar and a scrolling time column (grouped morning/afternoon/evening) side by side

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Date Rail

  Page Editordate-rail

  A horizontal strip of the upcoming days on top and a grouped time-chip grid below — date and times on one screen, no month grid

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

• Focus Day

  Page Editorfocus-day

  Split spotlight card: a compact calendar and a live selection checklist on the left, the chosen day's times on the right

  Specific to this style: title, subtitle, successMessage, preselectedServiceId, showServiceImage, showServiceDescription, showDuration, showPrices, preselectedStaffId, allowStaffSelection, showStaffPhotos, weekStartsOn, calendarStyle, slotButtonStyle, timeFormat, daysToShow, requirePhone, allowInstallments, enableCardSaving, showStepLabels, collapseCompletedSteps, summaryPosition, accentStyle, previewStep, successRedirect, authGateVariant, authGateIcon, authGateTone, authGateTitle, authGateDescription, authGateCtaLabel, authGateShowRegister, authGateBenefits

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• contentMaxWidth
• sectionMaxWidth
• horizontalPadding
• verticalPadding
• verticalAlignment
• horizontalAlignment
• horizontalMargin
• verticalMargin
• spacingOverrides
• animationType
• animationDuration
• animationDelay
• animationEasing
• animationStagger
• animationRepeat
• animationParallax
• imageParallax
• animationScrollEffect
• height