How to add Klaviyo/Mailchimp/Omnisend embedded form into your page

How to add Klaviyo/Mailchimp/Omnisend embedded form into your page

Klaviyo

You must have Klaviyo app already installed in your store

Step 1: Enable the Klaviyo app embed in Shopify

  1. From your Shopify admin, under Sales Channels click Online Store to open the dropdown.
  2. Select Themes
  3. Find your current theme and click Customize
  4. In the left hand menu, select Theme settings
  5. Click the App embeds tab and search for “Klaviyo.”
    Shopify store app embeds tab under Theme Settings with Klaviyo in the searchbar
  6. The Klaviyo app embed will appear in the list, because you already installed the Klaviyo app while integrating. Make sure the app embed is toggled on.
    Klaviyo Onsite Javascript app embed in Shopify toggled on
  7. Click Save
  8. To check that your app embed was toggled on correctly, navigate to the Integrations tab in Klaviyo. 
  9. Click Enabled Integrations and select Shopify. You’ll be brought to the integration settings page.
  10. Here, you should see a message calling out that your Shopify app embed is enabled, and the Viewed Product setting is checked by default.
    Shopify onsite tracking settings in Klaviyo showing callout with green background reading The Klaviyo App Embed is enabled on your Shopify store, and Viewed Product checked

Step 2: Copy your form's embed code

When you publish an embedded form from your Klaviyo account, after selecting publish, you'll see a popup with your form's embed code.

You can also get this code by opening your form in the editor and clicking to Behaviors tab. Copy this code and use it to add the form to your site.

Step 3: Add the embed code to your page

Add a Custom HTML element to your page where you want the form to appear. Then, paste the embed code above into the HTML Content.



Done! Now you can preview or publish your page.

Mailchimp

Step 1: Generate embedded form code from Mailchimp

1. Click Audience, then click Signup forms.


2. If you have more than one audience, click the Current audience drop-down and choose the one you want to work with.
3. Select Embedded forms.
4. Click Form Fields, Settings, Tags, or Referral Badge to customize your form.



5. When you’re ready, click Continue.


6. Click Copy Code.


Step 2: Add the embed code to your page

Add a Custom HTML element to your page where you want the form to appear. Then, paste the embed code above into the HTML Content.

Save your page and done! Now you can preview or publish your page.

Omnisend

You must have Omnisend app already installed in your store.

Once you have customized your form, you need to copy the code provided and launch the form. 



Add a Custom HTML element to your page where you want the form to appear. Then, paste the embed code above into the HTML Content.

Save your page and done! Now you can preview or publish your page.