How can I use Webflow's e-commerce features to create a booking system for a retreat/event website, where accommodations depend on specific event dates?
- Create CMS collections for Events and Accommodations, linking them via reference fields.
- Manually create e-commerce products for each accommodation tied to an event and include clear event-specific names.
- Design event pages using CMS templates with filtered accommodation lists and add-to-cart options.
- Customize checkout language for bookings and manage availability with stock control.
- Use Zapier or Make to automate confirmations and data updates.
- Integrate external tools like Acuity or Calendly via embeds for calendar-based booking functionality.
You can build a booking system for a retreat or event website in Webflow using its e-commerce and CMS features, but it requires some creative structuring since Webflow doesn’t natively support conditional bookings or calendars. Here's how to approach it.
1. Structure Your CMS Collection
- Create a CMS collection called “Events” with fields like:
- Event Name
- Start Date
- End Date
- Description
- Images
- Location
- Create another CMS collection called “Accommodations” with:
- Accommodation Name
- Associated Event (Reference to Events collection)
- Price
- Available Slots
- Type (e.g., Single, Double, Shared)
- Image
This lets you associate accommodations to specific events via a reference field.
2. Set Up an E-commerce Product Structure
- Webflow e-commerce doesn’t directly support CMS → Product linking, so you need to manually create each accommodation as a product and simulate event-based variation by:
- Naming the product something like "Private Room – Event Name – Event Date"
- Including detailed information about the event and what the product includes in the description
- Assigning the correct price and available stock
- Optionally, use Product Categories to group products visually by event.
3. Create Booking Pages Linked to Events
- Use CMS template pages for each event to show:
- Event details from the Events CMS
- A Collection List of accommodations (filtered to show only those connected to this event)
- For each accommodation, include a Product Link or Add to Cart button that lets users book.
4. Customize the Checkout Experience
- In E-commerce → Checkout, update content to reflect language around "booking," not "purchasing."
- Clarify that bookings are non-refundable or date-specific to avoid confusion.
5. Manage Inventory and Bookings
- Use inventory tracking per product to limit bookings per room type.
- Since there’s no calendar view in Webflow, users won’t be able to select dates manually — they pick pre-defined event dates.
6. Optional: Use Zapier or Make for Confirmation & Automation
- Use Zapier or Make (Integromat) to:
- Send a custom confirmation email
- Trigger Google Calendar event creation
- Update CRM tools like Airtable or Google Sheets with booking info
7. Consider External Tools If You Need Calendars
- If you require a calendar date picker or time slot selection, integrate tools like:
- Acuity Scheduling
- Calendly
- Tidycal
- Embed these using Webflow's Embed or custom code options, and use them instead of native checkout for more complex booking logic.
Summary
To create a retreat/event booking system in Webflow, use CMS collections to organize events and their accommodations, and Webflow e-commerce products to handle bookings tied to specific dates. While direct date selection isn’t supported, you can clearly label products by event date and manage availability through stock controls. For advanced date picking or calendar views, integrate with external booking tools.
