Migrate BigCommerce Newsletter Subscribers into Klaviyo - Stencil 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

Editing Stencil Theme Files

In order to edit Stencil theme files you need to make a copy the theme and apply it to your store.

  1. Navigate to Storefront Design > My Themes
  2. Click the Advanced dropdown, select Make a Copy
  3. Find the theme under My Themes, click the options menu, and select Apply

You now have the option under Current Theme > Advanced to Edit Theme Files.

Finding the Form to Edit

To add Klaviyo's Viewed Product tracking to your site you will paste a snippet of code to your site's main product page template.

  1. Navigate to Storefront Design > My Themes. Click the Advanced dropdown and select Edit Theme Files.
  2. From the editor navigate to templates > components > common > subscription-form.html
  3. 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.  

In the same file, before the </form> tag, 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>

Troubleshooting

If you run into any issues with the form, remember that you're editing a copy of your original theme. All the original, unedited files can be accessed by applying your original theme, accessing the editor, and copying the source needed.

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