Migrate BigCommerce Newsletter Subscribers into Klaviyo - Blueprint Themes

Overview

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:

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: 

  1. Click Design in the upper right.

647764

      2. Click Edit HTML / CSS next to your theme.

647765

     3.  Find Panels/SideNewsletterBox.html

647766

    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">

Make sure to replace LISTID with the id of your list.

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 name="first_name" and name="last_name" respectively. 

Step IV. Add the Javascript Code

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.  

First, in BigCommerce, find the file NewsletterJavaScript.html

647767In this file, you're going to add the following Klaviyo code: 

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> <script type="text/javascript"> KlaviyoSubscribe.attachToForms('#k_id_embedded_subscription_form', { hide_form_on_success: true }); 
</script>

Paste this code at the bottom of your file, after all of the existing code. It'll look like this:
647769

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. 

Troubleshooting

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:

647770

Was this article helpful?
0 out of 0 found this helpful