How to add a Klaviyo embed form to your BigCommerce site

You will learn

Learn how to add a Klaviyo embed form to your BigCommerce site, which requires creating the form in Klaviyo and then pasting its embed code into your site’s files where you want it to appear (e.g., the footer).

This guide shows how to replace the BigCommerce default sign-up form with a Klaviyo embed form.

Before you begin

To display a Klaviyo embed form on your BigCommerce site, integrate with BigCommerce and install Klaviyo’s onsite JavaScript (Klaviyo.js). This script enables sign-up forms and onsite tracking. If you checked the setting Automatically add Klaviyo onsite javascript (Recommended) when integrating with BigCommerce, you’re all set.

If not:

1. In Klaviyo, select Integrations in the left navigation.
   

2. Click BigCommerce, then select the Settings tab.
3. Check the setting Automatically add Klaviyo onsite javascript (Recommended).
4. Click Save.

The example in this article uses BigCommerce’s default Cornerstone theme. Keep in mind that your theme may differ, along with the names of some files or locations of code snippets. If you switch themes later, add the embed code to the new theme too.

Adding the form's embed code to your site

First, create and publish an embed form in Klaviyo. This section will go over the next steps of pasting your form's embed code on your BigCommerce site so it displays and syncs data properly.

1. If you have not already copied the embed code, open the form in the editor, select Targeting & behavior > Display, and copy the code under Embed code.
   

2. Navigate to your website and locate the default BigCommerce sign-up form. If you’re using a Cornerstone theme, it’s in the footer of the site.
   

• If you do not see a default form on your website:
  • Open your BigCommerce dashboard.
  • Navigate to Marketing > Email Marketing.
  • Check the box labeled Allow newsletter subscriptions. This enables you to collect email consent from visitors on your website, and also adds a default email sign-up box on your BigCommerce site. If this box is already checked and you still don’t see a default form, then your theme may not include one.

3. Open your BigCommerce dashboard, then navigate to Storefront > Themes.
4. From the Current Theme section, click the Advanced dropdown then choose Edit Theme Files.
   

• If you’re using a default theme, you will not be able to select this option. Instead:
  
  • Click Make a Copy, name it, then select Save a Copy.
  • Once it’s added to the Themes section, select the 3 dots, then choose Edit Theme Files. Note that any edits you make will only apply to the theme you're editing, and you'll need to apply the theme to your website to see the changes reflected.

5. In the left sidebar, open the file corresponding to where the default form appeared on your site. If the default form was located in the footer, like in the example, navigate to templates > components > common, and click the footer.html file.
6. Use the find shortcut (Command+F on Mac or Control+F on Windows) to search the word “newsletter” within the footer file.
   

7. Within the code beneath it, find the reference to the form. In the example, the form is referenced in a different file path: {{> components/common/subscription-form}}.
   

8. In the left sidebar, follow the file path referenced in the code (in this example, select components > common > subscription-form). You’ll see the actual components of the default form from here.
   • In this example, the default form’s heading and introductory text match the rest of the site’s styles. Keep that text outside the <form> element when replacing the form.
9. Highlight the entire <form> element, including the opening <form ...> tag, the closing </form> tag, and everything between them. Paste the embed code you copied from Klaviyo to replace it. Klaviyo creates its own form, so do not leave the embed code inside the original form tags.
   

10. Click Save and apply file to apply these changes to your website.
    • If the button only says Save file, then the file you just edited is not your Current Theme yet. You’ll need to click Save file, then scroll up and select Edit Theme Files > Save > Use as Active Theme in the top right corner to apply the theme to your website.

Once you’ve pasted the embed code, saved, and applied the changes in BigCommerce, navigate back to your website and refresh the page. Your Klaviyo embed form will display on your site and begin adding new subscribers to the Klaviyo list linked to the form.

Test your form

1. Submit the form on your website using an email address that is not already on the form’s connected list.
2. If the list uses double opt-in, open the confirmation email and confirm the subscription. New email subscribers join the list after confirming.
3. In Klaviyo, check that the email address has been added to the list connected to your form.

If you don’t see your form, see troubleshooting embed forms.

Next steps

Next, create a welcome series flow to make an immediate impact on your new subscribers.

Additional resources