Shopify Online Booking: How to Add a Booking Widget to Your Store

Why Shopify needs a dedicated booking widget

By default, Shopify is built for products. It handles shipping, tax, and inventory perfectly. But when it comes to appointments, it often falls short. Using a specialized booking widget like Bookable allows you to keep your Shopify store for products while giving your services the scheduling power they need.

Step 1: Get your embed code

First, log in to your Bookable account and go to Settings → Widget Embed. Here you can customize which services or staff members you want to pre-select. Copy the snippet that looks like this:

<iframe src="https://bookable.live/book/your-id?embed=true" width="100%" height="700" frameborder="0"></iframe>

Step 2: Add to a Shopify Page

In your Shopify Admin, navigate to Online Store → Pages. Select the page where you want the booking widget (e.g., "Book a Consultation"). Click the Show HTML button (<>) in the text editor and paste your code.

Step 3: Add to your Homepage (Theme Customizer)

If you want the widget on your front page, go to Online Store → Themes → Customize. Add a Custom Liquid or Custom HTML section and paste the snippet there. This is perfect for high-traffic stores that want to convert visitors immediately.

The Benefits of Integration

• Zero friction: Customers book without leaving your Shopify site.
• Calendar Sync: All bookings sync automatically with your Google or Microsoft calendar.
• Automated Reminders: Reduce no-shows with WhatsApp (coming soon) and email reminders sent automatically.