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
- Hover Details: Additional info appears on mouse over
- Navigation: Left/right arrows to change weeks
- Filter Dropdown: Location, teacher, category options (if enabled)
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
- Use filters to narrow down classes
- 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
- Teacher Photos: Small circular avatars next to class info
- Availability: Spots remaining displayed on cards
Customer Actions#
- Switch between Today and Tomorrow tabs
- Scroll through daily class list
- Tap class cards to book or view details
- See teacher information at a glance
Programs View#
Display Elements#
- Program Cards: Grid layout with program images
- Next Class Info: "NEXT: Tue 6pm" prominently shown
- Event Count: "3 events total" or similar scheduling info
- Program Details: Name, subheading, location, teacher
- Teacher Avatar: Small photo with instructor name
- Search Bar: Text search across program names (if enabled)
- Filters: Dropdown menus for location, teacher, category (if enabled)
Customer Actions#
- Search programs by name
- Filter by location, teacher, or category
- Click program cards to view next available class
- Browse all available programs 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: Dropdown with class types (yoga, pilates, etc.)
- Search: Text input for free-form search
- Clear Filters: Button to reset all selections
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