Embedding Clarflow in Shopify

Add your Clarflow funnel to any Shopify page using a Custom Liquid block. No app install required — just paste your embed code.

Prerequisites

Before you begin, make sure you have:

• A published Clarflow funnel (click Publish in the funnel editor)
• Your embed code copied from the funnel's Embed settings
• Admin access to your Shopify store

Step 1: Open the Shopify Theme Editor

1. Log in to your Shopify admin panel
2. Navigate to Online Store → Themes
3. Click Customize on your active theme

Step 2: Add a Custom Liquid Section

1. In the theme editor sidebar, click Add section
2. Search for Custom Liquid (available in all Shopify themes)
3. Click it to add a new Custom Liquid section to your page

Tip: You can also add Custom Liquid as a block inside existing sections, depending on your theme. Look for "Add block → Custom Liquid" within any section.

Step 3: Paste Your Embed Code

1. Click on the new Custom Liquid section in the sidebar
2. You'll see a text area labeled Liquid code
3. Paste your Clarflow embed code into this text area:

<div data-clarflow-id="your-funnel-id" data-clarflow-src="https://..."></div>
<script src="https://app.clarflow.com/embed.min.js" async></script>

Important: Replace the example above with your actual embed code from the Clarflow funnel editor (Settings → Embed → Copy).

Step 4: Position and Save

1. Drag the Custom Liquid section to your desired position on the page
2. Click Save in the top-right corner of the theme editor
3. Click Preview to verify the funnel appears correctly

Options

Fullscreen Mode

By default, the embed runs in fullscreen mode, which hides the page header and footer when the funnel is active. To disable this and keep your site's navigation visible, toggle off Fullscreen Mode in the Embed settings. This adds data-fullscreen="false" to your embed code.

Page Placement

You can embed the funnel on any page type:

Native Add to Cart & Checkout

Clarflow includes two native Shopify templates (Template browser → Offer Pages), both rendering a product card with a single action button:

• Add to Cart — adds the configured product(s) to your store's cart and opens your theme's cart drawer or popup notification automatically — no page reload.
• Checkout — adds the configured product(s) and then sends the visitor straight to your Shopify checkout page (skips the cart).

Both work out of the box with the standard embed code above: embed.js runs on your storefront and performs the add on the same origin as your cart. No extra script to paste.

Configuring the template

• Products — add one or more products to a single card. Each product takes either a Product Handle (the slug in the product URL, e.g. classic-tee) or a numeric Variant ID, plus a quantity. All of them are added on one tap. To find a Variant ID, open the product in Shopify admin and click the specific variant; the ID is the number after /variants/ in the URL (e.g. .../products/123456/variants/36110175633573 → use 36110175633573). Every product has at least one variant, even with no options.
• Pricing — toggle "Show original (strikethrough) price" to display a struck-through original price next to your discounted price; leave it off to show a single price. (The card shows one headline price for the whole offer — set it to represent the bundle.)
• Button styling — customize the label, background, text and border colors, border radius, and border width.

Notes

• For Add to Cart, the cart drawer or popup notification opens automatically for Dawn and most modern themes — whichever "Cart type" your theme is set to. On themes that expose no cart drawer/popup it falls back to refreshing the cart icon in place, and the visitor stays on the funnel (no redirect).
• A sold-out or invalid variant fails gracefully (the page emits a clarflow:add-to-cart:error event you can hook into; the visitor stays on the quiz).
• These templates only work when the funnel is embedded on your Shopify storefront — they do nothing on a standalone Clarflow-hosted page.

Troubleshooting

Funnel not appearing

• Check publish status — the funnel must be published in Clarflow
• Check the embed code — make sure you copied the full snippet including the <script> tag
• Check browser console — open DevTools (F12) and look for errors in the Console tab

Funnel appears but looks broken

• Check Fullscreen Mode — if the funnel overlaps your navigation, toggle Fullscreen Mode off
• Check CSS conflicts — your Shopify theme's CSS might conflict. Use the Custom CSS editor in Clarflow's Advanced settings to override styles

Script blocked by Shopify

Shopify allows external scripts in Custom Liquid blocks. If the script doesn't load:

• Ensure you're using the Custom Liquid section (not the HTML block in the rich text editor)
• Check that your store doesn't have a Content Security Policy that blocks external scripts
• Try loading the page outside the theme editor preview (the preview can sometimes block scripts)

Changes not showing

• Clear Shopify cache — go to Online Store → Themes → Actions → Clear cache
• Hard refresh — press Ctrl+Shift+R (or Cmd+Shift+R on Mac) in your browser
• Check if the section is hidden — some themes let you hide sections on mobile/desktop separately