Add ClassFlow to Your Shopify Store

Prerequisites

• ✓ Any Shopify plan - Basic through Plus. No plan restrictions for custom HTML.
• ✓ A ClassFlow studio account with Widget Studio enabled.
• ✓ Your studio slug from Widget Studio.
• ✓ Your Shopify store domain (e.g.yourstudio.comoryourstore.myshopify.com) added to the Widget Studio allowlist.

Path A: Custom Liquid section (recommended)

Custom Liquid sections are available in the Shopify theme editor - no code editor access required. Works on Dawn and most modern Shopify themes.

1. 1

   Copy your snippet from Widget Studio

   Go to classflow.studio → your studio → Marketing → Embeds. Choose widget type and theme. Copy the snippet.

2. 2

   Open Online Store → Themes → Customize

   In Shopify Admin, go to Online Store → Themes. ClickCustomize on your active theme.

3. 3

   Navigate to the target page

   Use the page dropdown at the top of the Customize pane to navigate to the page where you want the widget (e.g. your homepage, or a custom page you've created).

4. 4

   Add a Custom Liquid section

   In the left sidebar, click Add section. Search forCustom Liquid and add it. Drag it to the position on the page where you want the widget.

5. 5

   Paste the snippet into the Liquid field

   Click the Custom Liquid section in the sidebar. Paste the full snippet into the Liquid code text area that appears in the section settings.

6. 6

   Save and view the live store

   Click Save in the top-right. Click View (eye icon) to open your live storefront and confirm the widget loads.

Path B: Edit theme code

For full control or to embed on all pages, edit your theme's Liquid templates directly.

1. 1

   Go to Online Store → Themes → Edit code

   Click the ... menu on your active theme and chooseEdit code.

2. 2

   Open the target template file

   For a custom page: opentemplates/page.liquidortemplates/page.json(modern themes). For sitewide injection: openlayout/theme.liquidand paste before{{ content_for_layout }}.

3. 3

   Paste and save

   Paste the snippet at the desired location and click Save.

Embed snippet

<div data-classflow="schedule" data-studio="your-studio-slug" data-studio-url="https://your-studio.classflow.studio" data-api-url="https://api.getclassflow.com" data-theme="light" data-days="14">
</div>
<script type="module" src="https://widget.classflow.studio/v1/loader.js"></script>

Theming

Override ClassFlow CSS variables in your theme'sassets/base.cssor via the Edit code → assets panel:

:root { --cf-primary: #0f766e; --cf-bg: #ffffff; --cf-text: #111827; --cf-radius: 0.75rem;
}

Multiple widgets on one page

Add multiple Custom Liquid sections, one per widget. Include the full snippet in each section. The ClassFlow script deduplicates - loading it twice does not cause errors.

Common gotchas

• Custom Liquid not visible in editor preview.Shopify's theme editor preview loads in a sandboxed iframe - external scripts may not run. Always test on the live storefront.
• Shopify script sanitization.Shopify's Liquid render engine doesn't strip script tags from Custom Liquid sections, but it does in some older Metafield contexts. If the script is stripped, use Path B (edit code) and put the script tag intheme.liquidbefore</body>.
• Online Store blocked by password.If your store is password-protected (e.g. pre-launch), the widget is accessible but the Widget Studio allowlist check runs against the password-page URL - add your Shopify domain to the allowlist regardless.