This guide walks you through adding a Klaviyo embedded form to your BigCommerce site. Embedded forms require one extra step: you must add your form's embed code to your site where you want your form to appear.
Before adding an embedded form, you must first install klaviyo.js to your site. Follow the instructions in our guide to Integrating with BigCommerce, or check out our general guide on Installing Klaviyo Signup Forms.
Copy Your Form's Embed Code
When you publish an embedded form from your Klaviyo account, the publish modal provides you 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. In the next section we'll paste this code into your theme files.
Add the Embed Code to Your Site
To add your form's embed code we're going to follow a three step process:
- Locate where on your site you want to add your form.
- Search through your theme files to identify where your embed code should be added.
- Paste in your embed code, and adjust your form's styles as needed.
This general approach works for adding a Klaviyo form to any site, but in the example below we're going to be working with the default Cornerstone stencil theme from BigCommerce. Keep in mind that your theme may differ, along with some of the names of files or the locations of code snippets.
The first step is to decide and locate where you want to add your embed code. In this example we'll cover replacing your default BigCommerce signup form with a Klaviyo embedded form.
Start by navigating to your store and locating your default newsletter form. In the image below, we can see the default signup form in the footer of my site.
If you don't see your default form on your site, navigate to Marketing > Email Marketing in your BigCommerce admin and 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.
Next we have to locate our default form in our theme files.
From your BigCommerce dashboard navigate to Storefront > My Themes. From the Current Theme section, click the Advanced Settings dropdown and click Edit Theme Files. This opens the web editor.
We can start to look in our footer.html file, because this is where our form appears on our site. In the left sidebar, navigate to templates > components > common, and click the footer.html file to open it in your editor.
Inside footer.html we can use CMD+F (or Ctrl+F if you're using Windows) to search for the word "newsletter".
We can see that our default newsletter form appears within the code. Looking closer, we can see that the actual form is referenced in a different file path, components/common/subscription-form.
Navigate to this file (components > common > subscription-form) and open it in the editor. Now we can see the actual components of our 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. Looking at our source code we can see our default form is contained in the entire <form> element.
To add your Klaviyo embedded form, highlight everything between the opening and closing <form> tags and replace it by pasting in your embed code.
Now, save your BigCommerce theme files. Switch back to your Klaviyo account and double check that you've published your form. Last, navigate to your site and view your Klaviyo form exactly where your default BigCommerce form used to be.
Now customers that signup to your embedded form will be added directly to your Klaviyo account.