If your BigCommerce store already has an existing built-in newsletter subscribe form, these instructions will walk you through updating this sign up form so that the form points to a Klaviyo list of your choice.
If you don't have an existing sign up form in your store, or are otherwise interested in how to fully migrate existing subscriber lists and sign up forms to Klaviyo, explore the following two guides:
- Redirect Existing Sign Up Forms to Klaviyo
- Migrate Existing Subscribers (and Unsubscribes) into Klaviyo
These instructions walk through moving your newsletter form on BigCommerce from Mailchimp or another service to Klaviyo. This is only if you already have an existing newsletter form.
Step I. Create a List in Klaviyo
First off, find or create the list in Klaviyo that you want new subscribers to be added to. You can find all current lists, or create a new list, in your account's Lists & Segments tab.
Once you've selected a list, click on your list and navigate to the Sign Up Forms tab across the top navigation bar. Here, you will see several sign up form options.
Keep this open tab open in your browser before moving on to the next step - you're going to copy fields from this Klaviyo window into BigCommerce.
Step II. Find your Form in BigCommerce
The next step is finding the existing sign up form in Bigcommerce you're going to edit. Open your Bigcommerce store and do the following:
- Click Design in the upper right.
2. Click Edit HTML / CSS next to your theme.
3. Find Panels/SideNewsletterBox.html
4. In this file, you're going to replace the section between <form> and </form>.
Step III. Change the Form
Next, you are going to edit the code between <form> and </form>.
In the form section, change the action to be https://manage.kmail-lists.com/subscriptions/subscribe like in the following example:
<form id="k_id_embedded_subscription_form" action="https://manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="https://manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
You will also need to add the data-ajax-submit="https://manage.kmail-lists.com/ajax/subscriptions/subscribe section.
Next, look for the method="..." section where the "..." part is, you will either see POST or GET (might be lower case). Change this to GET if it isn't already.
If you see
class="klaviyo_default_styling" on your form, remove it. That line uses Klaviyo's default form colors and styles, so it will change your form.
Then, find the line with type="hidden" and replace it with this line:
<input type="hidden" name="g" value="LISTID">
Next, change the name of the
<input type="email" section to be a lower case "email". The rest of that section can remain the same:
<input type="email" value="" name="email" id="k_id_email" placeholder="Your email" />
If there are First Name and Last Name fields, make sure
At this point, your form should work, but it will send you to another page to subscribe. However - with one more addition - we can make it so someone can subscribe without leaving the page.
In this file, you're going to add the following Klaviyo code:
Paste this code at the bottom of your file, after all of the existing code. It'll look like this:
Hit save, and you should be good to go!
At this point, test everything out - when someone enters their email, they'll get a confirmation email, and once they confirm subscription, they'll be added to your list in Klaviyo.
If you run into any issues with the form, it's easy to revert the BigCommerce site to what it was. To do so, just click Revert to Original: