Sync BigCommerce Newsletter Subscribers at Checkout to a Klaviyo List

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.

681149

While the BigCommerce API does not make it possible to sync these subscribes from your store through Klaviyo's default BigCommerce integration, all you need to do is copy/paste a short snippet of code into your checkout template file if you want these new subscribers to automatically get added to a Klaviyo list.

To start syncing new subscribers at checkout to a Klaviyo list, first find your store's checkout_express.html template file by logging into your BigCommerce store admin and navigating to Store Setup > Design. Then click the Edit HTML/CSS link for your current theme.

647760

In the theme editor, locate Other Template Files and find the checkout_express.html

Here, copy/paste the following code snippet into your checkout_express.html template file near the bottom 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

Here's an example of what this will look like:

681162

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: