Class Schedule

What this section does

A public timetable of fixed-start group classes: spots left and one-tap booking

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.

• Week Columns

  Freeweek-columns

  A column per day with class cards; day tabs on phones

  Specific to this style: badge, title, subtitle, scheduleDays, showFilters, showImage, showSpotsLeft, showStaffAvatar, showPrice, showDuration, ctaLink

• Agenda

  Freeagenda

  A day-by-day agenda under a week strip, with a booking button on every class

  Specific to this style: badge, title, subtitle, scheduleDays, showFilters, showImage, showSpotsLeft, showStaffAvatar, showPrice, showDuration, ctaLink, ctaLabel, showEmptyDays

• Time Grid

  Page Editortime-grid

  A calendar week: hours down the side, classes placed by start time and length

  Specific to this style: badge, title, subtitle, scheduleDays, showFilters, showImage, showSpotsLeft, showStaffAvatar, showPrice, showDuration, ctaLink, showNowLine

• Class Matrix

  Page Editorclass-matrix

  The studio wall chart: one row per class, one column per day, times in the cells

  Specific to this style: badge, title, subtitle, scheduleDays, showFilters, showImage, showSpotsLeft, showStaffAvatar, showPrice, showDuration, ctaLink

• Day Timeline

  Page Editorday-timeline

  One day's classes on a vertical timeline, picked from a date strip

  Specific to this style: badge, title, subtitle, scheduleDays, showFilters, showImage, showSpotsLeft, showStaffAvatar, showPrice, showDuration, ctaLink, ctaLabel

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
• photoFocusX
• photoFocusY
• animationScrollEffect
• controlButton
• controlInput
• controlTextarea
• controlSelect
• controlCheckbox
• controlRadio
• controlSwitch
• controlQuantity
• stickyOnScroll
• height