You will learn
Learn how to add a Klaviyo embedded form to your BigCommerce site, which requires adding your form's embed code to your site’s theme files where you want it to appear.
Before you begin
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:
- In Klaviyo, click your account name in the lower left corner, then select Integrations
- Click All Integrations
- Search for BigCommerce and click into the integration
- 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 sign-up 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.
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 sign-up form. Here, it’s in the footer of the site.
If you don't see a default form on your site:
- If this box is already checked and you still don't see a default form, then your theme may not include one
- Open your BigCommerce dashboard
- Navigate to Marketing > Email Marketing
- Check the box labeled Allow Newsletter Subscriptions?
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.
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.
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.
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.
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.
Outcome
You've added the embed form code to your site. Now, customers that sign up via your embedded form will be added directly to the Klaviyo list that you set for your form.