How to Add a Klaviyo Embedded Form to Your BigCommerce Site

read
Last updated at:

Overview

Learn how to add a Klaviyo embedded form to your BigCommerce site. In order to enable an embedded form on your BigCommerce site, you must first add your form's embed code to your site’s theme files where you want it to appear.

Before Getting Started

Before enabling an embedded form, you must first add Klaviyo’s onsite JavaScript, also known as klaviyo.js, to your site. If you checked the setting Automatically add Klaviyo onsite JavaScript when integrating with BigCommerce, you’re all set. 

If not:

  1. Navigate to the Integrations tab in Klaviyo 
  2. Click All Integrations
  3. Search for BigCommerce and click into the integration
  4. Edit the setting to enable onsite JavaScript 

The example in this article uses BigCommerce’s default Cornerstone theme. Keep in mind that your theme may differ, along with some of the names of files or the locations of code snippets.

This article shows how to replace your BigCommerce default signup form with your Klaviyo embedded form, but you can add your form wherever you’d like. 

Adding the Embed Code to Your Site

1. When you publish an embedded form from your Klaviyo account, the publish modal will provide you with your form's embed code. Copy this code.

Publish embed form modal in Klaviyo with embed code highlighted in blue, and publish with a blue background

You can also copy this code by opening your form in the editor and clicking into the Behaviors & Targeting section.

2. Navigate to your BigCommerce store and locate your BigCommerce signup form. Here, it’s in the footer of the site.

A BigCommerce storefront showing sample products and an email subscription form in the site footer

  • If you don't see a default form on your site:
    1. Open your BigCommerce dashboard 
    2. Navigate to Marketing > Email Marketing
    3. Check the box labeled Allow Newsletter Subscriptions?
      • If this box is already checked and you still don't see a default form, then your theme may not include one

3. From your BigCommerce dashboard, navigate to Storefront > My Themes

4. From the Current Theme section, click the Advanced Settings dropdown and click Edit Theme Files to open the web editor.

BigCommerce dashboard showing Current Theme with Advanced Settings dropdown open and Edit Theme Files highlighted in blue.

  • If you're working with a default theme, the option to Edit Theme Files will not appear. First, make a copy of the theme, then make your edits to the copy. Any edits you make will only apply to the theme you are editing. If you change your theme in the future, your edits will not be automatically moved to your new theme.

5. Open the file corresponding to where your form appeared on your site. If your form was located in the footer, like in the example, navigate to templates > components > common in the left sidebar, and click the footer.html file to open it in the editor.

6. Use the Find shortcut (Cmd+F on Mac or Ctrl+F on Windows) to search for the word "newsletter" within your footer file. 

BigCommerce footer file open in html editor with footer form code highlighted in blue and the word newsletter highlighted in yellow

The default newsletter form code is highlighted in the screenshot above . 

7. Look within the code to find reference to the form, which in this case is referenced in a different file path, components/common/subscription-form.

Closeup of footer form code in BigCommerce html editor, with components/common/subscription-form highlighted in blue

8. Navigate to the file referenced in your form code (in this example, components > common > subscription-form) and open it in the editor. Here, you’ll see the actual components of the default form.
The default form's header and language matches the rest of our site's styles, so we're only going to replace the actual form input. In the source code, you can see that the default form’s input is contained in the <form> element.

Alt: Subscription-form file open in BigCommerce html editor with form element highlighted in blue

9. Highlight everything between the opening and closing <form> tags and then paste the embed code you copied from Klaviyo to replace the highlighted text.

10. Save your BigCommerce theme files. 

11. Switch back to your Klaviyo account and double check that you've published your form. 

12. Navigate to your site and view your Klaviyo form exactly where your default BigCommerce form used to be.

Now, customers that sign up via your embedded form will be added directly to the Klaviyo list that you set for your form.

 Additional Resources

x
Was this article helpful?
36 out of 66 found this helpful