Adding the Booking Widget to Your Theme
Step-by-step guide to adding and configuring the CapFlow booking widget on your Shopify storefront
The CapFlow booking widget is a Shopify theme app extension that displays availability and lets customers book directly from your storefront. This guide covers how to add the widget to your theme and configure its settings.
Before You Start
The booking widget requires an Online Store 2.0 theme. Most modern Shopify themes support this, including Dawn, Sense, Craft, Taste, and Ride.
| Theme type | Supports app blocks? |
|---|---|
| Online Store 2.0 (Dawn, Sense, etc.) | Yes |
| Vintage themes (Debut, Brooklyn, etc.) | No |
Tip: Not sure which type you have? In your Shopify admin, go to Online Store > Themes. If your theme shows a Customize button that opens a visual editor with sections and blocks, it’s OS 2.0. If you need to upgrade, Shopify’s free Dawn theme is a great starting point.
Adding the Widget from CapFlow
The quickest way to add the widget:
- In the CapFlow app, go to the Setup page
- Click Add widget to theme — this opens the Shopify theme editor with the widget block ready to insert
- Position the block where you want the booking interface to appear on the page
- Click Save in the theme editor
Adding the Widget Manually
If you prefer to add the widget manually:
- In your Shopify admin, go to Online Store > Themes
- Click Customize on your active theme
- In the theme editor, use the page dropdown at the top to navigate to a Product page template
- Click Add block (or Add section) in the left sidebar
- Search for CapFlow Booking Widget under the Apps section
- Click it to add it to the page
- Drag to reposition if needed
- Click Save
Configuring Block Settings
Once the widget block is added, click on it in the theme editor to see its settings:
| Setting | Description | Default |
|---|---|---|
| Widget header | Main heading displayed above the widget | ”Book a Session” |
| Widget subtitle | Optional text below the heading | (empty) |
| App proxy base path | Must match your app proxy subpath — don’t change this unless instructed | /apps/booking |
| Default resource | Pre-select a specific resource, or “auto” to let the customer choose | auto |
| Default service | Pre-select a specific service, or “auto” to let the customer choose | auto |
| Party size | Default number of people | 1 |
| CTA button label | Text shown on the booking button | ”Book” |
| Compact layout | Use a more compact display mode | Off |
| Widget width | Full (1400px), Medium (800px), or Narrow (600px) | Full |
Tip: Most merchants can leave all settings at their defaults. If you only have one resource or service, set the default to “auto” — the widget will skip the selection step automatically.
Which Pages to Add the Widget To
The widget works best on product pages, since it connects to Shopify checkout through the linked product’s variants.
You can also add the widget to:
- Custom pages — for a dedicated booking page
- Collection pages — if you want booking alongside a product listing
- The homepage — for prominent booking access
Tip: If you link the widget to a specific service/resource, you can place it on different product pages for different activities.
Customizing Widget Design
Colors, fonts, spacing, and border radius can be customized from the CapFlow app:
- Go to Widget in the CapFlow sidebar
- Adjust colors, typography, and shape settings
- Use the live preview to see your changes
- Click Save
These design settings apply globally to all widget instances on your storefront.
Troubleshooting
Widget not appearing on the page
- Make sure you added the block to the correct page template and clicked Save
- Check that your theme is an Online Store 2.0 theme
Widget shows but no availability
- Verify you have upcoming timeslots in the CapFlow Calendar
- Check that at least one service is created and linked to the correct resource
“Booking widget requires JavaScript” message
- JavaScript is disabled in the browser — this is rare and typically only happens in testing
Widget appears but checkout doesn’t work
- Ensure your service is linked to a Shopify product with the correct price variants
- See Services & Pricing for variant setup
What’s Next?
- Getting Started — Full setup walkthrough
- Services & Pricing — Configure bookable products and pricing
- Schedules — Set up your operating hours
- Settings Reference — All app settings explained