Integrating Klaviyo Forms with Surge (App Embed Method)

Overview

Surge integrates seamlessly with Klaviyo’s Shopify app embeds, allowing you to add popups, flyouts, and embedded signup forms across your store — without editing theme code.

Using the App Embed method ensures:

• Faster setup

• No custom code required

• Safe theme updates

• Better performance and compatibility with Surge

This is the recommended approach for connecting Klaviyo forms to your Surge store.

Before you begin

Make sure you have:

• A Shopify store using the Surge theme

• A Klaviyo account

• The Klaviyo Shopify app installed

Step 1: Install the Klaviyo app

1. From Shopify Admin, go to Apps → Shopify App Store

2. Search for Klaviyo: Email Marketing & SMS

3. Install and connect your Klaviyo account

Step 2: Enable the Klaviyo App Embed in Surge

1. Go to Online Store → Themes

2. Click Customize on Surge

3. Open App embeds (puzzle icon in the left sidebar)

4. Toggle Klaviyo Forms / Klaviyo Onsite / Klaviyo App Embed → ON

5. Click Save

This allows Klaviyo to automatically load forms across your storefront.

Step 3: Create your form in Klaviyo

1. Open Klaviyo Dashboard

2. Navigate to Signup Forms → Create form

3. Choose your format:

   • Popup

   • Flyout

   • Embedded

4. Design your form

5. Configure targeting (all pages, homepage only, exit intent, etc.)

6. Click Publish

Your form will now appear based on your targeting rules.

Adding Embedded Forms Inside Pages or Sections (Optional)

If you'd like a form to appear directly inside a page (for example, in the footer or a landing page):

In Klaviyo

1. Create an Embedded form

2. Copy the embed code

In Surge

1. Open the Theme Editor

2. Add a Custom Liquid block or section

3. Paste the embed code

4. Save

Best Practices

• Use App Embeds whenever possible (no theme file edits needed)

• Manage targeting and display rules directly in Klaviyo

• Avoid duplicating forms across multiple sections

• Keep forms lightweight for optimal performance