Your customers' experience with each integration type on your website.
Calendar View#
Desktop Display#
- Week Grid: 7 columns showing days of the week
- Time Slots: Classes displayed as cards in their time slots
- Class Cards: Show class name, time, teacher, spots available
- Category Colors: Classes show colored badges matching their category
- Hover Details: Additional info appears on mouse over
- Navigation: Left/right arrows to change weeks
- Filter Options: Location and teacher dropdowns
- Category Legend: Color-coded chips showing all class categories (click to filter)
Mobile Display#
Automatically switches to List view for better mobile experience.
Customer Actions#
- Click any class card to view details or book
- Navigate between weeks using arrows
- Filter by location or teacher using dropdown menus
- Click category chips to filter by class type (multiple selections allowed)
- Hover over classes for quick preview (desktop only)
List View#
Display Elements#
- Day Tabs: Today/Tomorrow navigation at top
- Time Groupings: Classes organized by time periods
- Class Cards: Show time, name, teacher avatar, location
- Category Colors: Classes show colored badges matching their category
- Teacher Photos: Small circular avatars next to class info
- Availability: Spots remaining displayed on cards
- Category Legend: Color-coded chips for filtering (same as calendar view)
Customer Actions#
- Switch between Today and Tomorrow tabs
- Scroll through daily class list
- Tap class cards to book or view details
- Click category chips to filter by class type
- See teacher information at a glance
Classes View#
Display Elements#
- Class Cards: Grid layout with class images
- Next Class Info: "NEXT: Tue 6pm" prominently shown
- Event Count: "3 events total" or similar scheduling info
- Class Details: Name, subheading, location, teacher
- Teacher Avatar: Small photo with instructor name
- Search Bar: Text search across class names (if enabled)
- Filters: Dropdown menus for location, teacher, category (if enabled)
Customer Actions#
- Search classes by name
- Filter by location, teacher, or category
- Click class cards to view next available session
- Browse all available classes in grid format
- See hover effects on desktop
Shop View#
Display Elements#
- Shop Header: "[Studio Name] Shop" with shopping cart icon
- Product Grid: Cards showing product images and info
- Product Info: Name, description, price with currency symbol
- Stock Status: In stock/out of stock indicators
- Search Bar: Text search across products (if enabled)
- Price Filters: Min/max price range controls (if enabled)
- Stock Filter: "In stock only" checkbox (if enabled)
Customer Actions#
- Search products by name or description
- Filter by price range or stock availability
- Click products to view details or purchase
- Browse all available merchandise
Filter Behavior#
Visible Filters#
When filters are enabled, customers see:
- Location: Dropdown with all studio locations
- Teacher: Dropdown with instructor names
- Category Legend: Color-coded chips showing all class categories with their assigned colors
- Search: Text input for free-form search (classes view only)
- Clear Filters: Button to reset all selections
Category Legend#
The category legend appears automatically when your classes have categories assigned:
- Each category shows as a colored chip with its name
- Click a chip to filter - only classes in that category appear
- Select multiple categories to see classes from any of them
- Click again to deselect and show all classes
- Categories inherit their colors from your class settings
Pre-configured Filters#
When you set pre-filters:
- Hidden from customers: They don't see filter controls
- Auto-applied: Results are automatically filtered
- Cannot be changed: Customers see only your pre-selected content
- Active indicators: Small badges show active filters
Interactive Elements#
All Views Include#
- Responsive design: Adapts to screen size
- Loading states: Skeleton placeholders while content loads
- Error handling: Friendly messages if something goes wrong
- Custom styling: Your brand colors and styling applied
- External links: Classes/products open in new tabs when clicked
Mobile Optimizations#
- Touch-friendly: Larger tap targets for mobile users
- Simplified layout: Less clutter on smaller screens
- Auto-switching: Calendar becomes List view on mobile
- Thumb navigation: Easy scrolling and tapping