Overview
For BigCommerce stores interested in growing their subscribers lists, BigCommerce makes it possible to prompt customers to opt-in to newsletter communications at checkout. This typically takes the form of a small checkbox during checkout that will appear right before a customer clicks Proceed to Payment.
While the BigCommerce API cannot currently sync these subscribes from your store through Klaviyo's default BigCommerce integration, you can add a short snippet of code into your checkout template file to automatically add new subscribers to a Klaviyo list.
Sync BigCommerce Newsletter Subscribers at Checkout to a Klaviyo List
To start syncing new subscribers at checkout to a Klaviyo list, you will need to edit your store's checkout HTML template. You can locate your store's HTML template file by logging into your BigCommerce store admin and navigating to the Storefront tab. Scroll down to the My Themes section and locate the theme you are currently using. Click the Advanced button, indicated by an ellipsis, and then select Edit Theme Files. If you are prompted, confirm you wish to edit your files by clicking Edit theme files in the popup window.
The theme file editor will open your home.html file in a new window. In the lefthand navigation, locate the templates > pages folder and open the dropdown. Your checkout_express.html template can be located within this folder. Click it to open the template in a tab on the right.
Near the bottom of the code for this template, add the following code snippet right before the closing </body> tag:
<script type="text/javascript">
var _learnq = _learnq || [];
_learnq.push(['account', 'ACCOUNT_ID']);
(function () {
var b = document.createElement('script'); b.type = 'text/javascript'; b.async = true;
b.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'a.klaviyo.com/media/js/analytics/analytics.js';
var a = document.getElementsByTagName('script')[0]; a.parentNode.insertBefore(b, a);
})();
</script> <script type="text/javascript" src="https://a.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> <script type="text/javascript">
KlaviyoSubscribe.watchField('input[name="FormField[1][1]"]', '$email', { delegate: 'body' });
KlaviyoSubscribe.watchFormSubmission('form#OrderConfirmationForm', {
list: 'LIST_ID',
delegate: 'body',
if: 'input[name="join_mailing_list"]',
properties: {
$source: 'BigCommerce Checkout'
}
});
</script>
Make sure to replace the following:
ACCOUNT_ID:Replace this placeholder with your account's Public API Key (found in Account > Settings > API Keys)LIST_ID:Replace this placeholder with the List ID for the list you want new subscribers to sync to
If double opt-in is enabled for your list in Klaviyo, subscribers will receive a confirmation email before getting added to your Klaviyo list. Learn more about the double opt-in process here.
Segment Subscribers Based on Sign Up Source
When new subscribers sync to Klaviyo by checking your opt-in box at checkout, the sign up source ($source) attributed to these subscriber profiles will be BigCommerce Checkout. You can then easily segment these subscribers using the Properties about someone condition in Klaviyo's Segment Builder: