Add a booking widget to Shopify

What you need

• Any Shopify plan (Basic, Shopify, Advanced — all support Custom Liquid sections in 2.0 themes).
• A theme that's Online Store 2.0 (almost all modern themes are).
• A Google account.

Step 1 — Sign up for circleit

Go to circleit.app, sign up with Google, pick a username, set weekly hours, create one event type. Common Shopify use case: a "Book a consultation" or "Book a fitting" event.

Step 2 — Add a Custom Liquid section

1. In your Shopify admin, go to Online Store → Themes.
2. Click Customize on your live theme.
3. Navigate to the page where you want the widget (a custom page is easiest — create one first via Pages if needed).
4. In the left sidebar, click Add section.
5. Scroll to Custom Liquid and click it.
6. In the Custom Liquid code field, paste the snippet.
7. Click Save.

Inline vs. floating button

Default is a floating button. For inline (widget sits in the page flow), use:

<script src="https://circleit.app/embed.js"
        data-circle="your-username"
        data-mode="inline"></script>

Adding to a product page

If your "product" IS the booking (e.g., a photographer selling a session), add the Custom Liquid section to your product template. Drag it below the product description in the theme customizer. The widget then appears on every product that uses that template.

Common Shopify gotchas

• Older themes (Online Store 1.0) don't support Custom Liquid sections. If you don't see Custom Liquid in the section list, your theme is 1.0. You'll need to either upgrade the theme to 2.0 OR add the snippet directly to a theme.liquid template file (developer territory; email us for help).
• Content Security Policy headers. Some Shopify Plus stores add custom CSP headers that block third-party scripts. If the widget doesn't load, check your Plus-specific CSP rules and whitelist https://circleit.app.
• Mixed content warnings. Make sure the snippet uses https:// (not http://) — Shopify always serves over HTTPS, so any HTTP script would be blocked.

What your customer sees

Same flow as on any platform — pick event, pick date, pick time, enter contact info, confirmation. If you sell the actual session as a Shopify product, the widget lets people pick the time; checkout collects payment. Note: circleit doesn't yet integrate with Shopify checkout directly (that's on the v1 roadmap with the Stripe integration).

Troubleshooting

• Custom Liquid section not visible in customizer: Your theme is Online Store 1.0. Either upgrade the theme or contact us.
• Widget loads in preview but not on live store: Clear Shopify's theme cache (re-save the theme) and hard-refresh.
• Need to coordinate the booking with a paid product: For now, use the booking as the lead capture and follow up with a payment link. Native Shopify checkout integration is on the roadmap.