Integrate with BigCommerce - Stencil Theme

Overview

This article walks you through enabling the BigCommerce integration in your Klaviyo account. After you integrate, you can optionally add web tracking and product tracking to your BigCommerce store.

Note

This article covers integrating with a BigCommerce Stencil theme. BigCommerce has two variations of themes, Stencil and Blueprint. The integration process is the same for both theme styles, but the location of some menu items and the location of where you paste in some code snippets is different for Blueprint themes.

Enable the BigCommerce Integration

This process walks you through creating a Legacy API Account in your BigCommerce store and using your credentials to enable the BigCommerce integration in your Klaviyo account.

  1. From your BigCommerce dashboard, navigate to Advanced Settings > Legacy API Settings.
  2. Click Create a Legacy API Account.
    680367
  3. Set the Username to Klaviyo and click Save.
  4. Now go to your Klaviyo account, click the Integrations tab, and search for the BigCommerce Integration.
    bc_selectInteg.png
  5. In Klaviyo, enter the information from the Legacy API Account you just created in BigCommerce. Click Connect to BigCommerce.
    bc_credsInKlaviyo.png

Your data will begin to sync with Klaviyo in minutes. You've successfully enabled the BigCommerce integration.

Add Web Tracking to your BigCommerce Store

Adding web tracking allows you to record and analyze when profiles in your Klaviyo account visit your site.

This process walks you through copying the web tracking snippet from this article and pasting it into your BigCommerce theme files.

  1. Update the API Key in the following code snippet with the Public API Key / Site ID from your Klaviyo account.
    <script type="text/javascript">
    var _learnq = _learnq || [];

    _learnq.push(['account', 'API Key']);

    (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>
  2. Copy the updated code snippet.
  3. Now go to your BigCommerce dashboard, and navigate to Storefront Design > Design Options and click on the Scripts tab inside the page.
    bc_footerScript.png
  4. Paste the code snippet into the editor and click Save.

This enables web tracking on all of the pages of your BigCommerce store.

Add Product Tracking to your BigCommerce Store

Adding product tracking allows you to record and analyze when profiles in your Klaviyo account view products on in your store.

This process walks you through copying the product tracking snippet from this article and pasting it into your BigCommerce theme files.

  1. Copy the product tracking code snippet below:
    <script type="text/javascript"> 

    var _learnq = _learnq || [];

    var item = {
    Name: "{{product.title}}",
    ProductID: "{{product.id}}",
    ImageURL: "{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}",
    URL: "{{product.url}}",
    Brand: "{{product.brand.name}}",
    Price: "{{product.price.without_tax.value}}",
    CompareAtPrice:"{{product.price.rrp_without_tax.value}}"
    };

    _learnq.push(['track', 'Viewed Product', item]);

    _learnq.push(['trackViewedItem', {
    Title: item.Name,
    ItemId: item.ProductID,
    ImageUrl: item.ImageURL,
    Url: item.URL,

    Metadata: {
    Brand: item.Brand,
    Price: item.Price,
    CompareAtPrice: item.CompareAtPrice
    }
    }]);

    </script>
  2. Now from your BigCommerce dashboard, navigate to Storefront Design > My Themes.
  3. From the Current Theme, click the Advanced Settings dropdown and click Edit Theme Files. This opens the web editor.
    bc_editTheme.png

    Note

    If you're working with a default theme the option to Edit Theme Files will not appear. First make a copy of the theme, then make your edits to the copy. This is most likely the case if your new to BigCommerce or if you have never edited your default theme before.
  4. Navigate to templates > pages and scroll down to open the product.html page.
  5. At the bottom of this page, on a new line, paste in the code and click Save.

This enables product tracking on all of your product pages.

Data Synced with the BigCommerce Integration

With your BigCommerce integration you'll start to sync the following information about your customers:

  • Sales and order data including which products were purchased, product images, price, and quantity.
  • Customer information including first and last name, location, and how they found your store.
  • Fulfillment, refunded, and cancelled order data.
  • When people visit your website and what products and collections they view.

Manually Testing Web Tracking

To test that tracking is set up properly, go to a product page for your store, and add the following to the end of the URL, replacing email@example.com with your email address:

 ?utm_email=email@example.com

Click enter to reload the page. Now, when you search in Klaviyo for your email address. You should see a profile has been created and has tracked your product view.

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