Integrate with BigCommerce - Blueprint Themes

Overview

This article walks 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 Blueprint 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 Stencil 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 a web tracking snippet from your Klaviyo account and pasting it into your BigCommerce theme files.

  1. Copy the web tracking code snippet below:
    <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. Now go to your BigCommerce dashboard, and navigate to Storefront Design > My Themes.
  3. From the Current Theme, click the Edit HTML/CSS link. This opens the web editor.
    bc_editBPtheme.png
  4. Navigate to the Other Template Files > Layouts and click on the footer.html file. This loads the default.html file into the web editor.
  5. Paste the code snippet at the bottom of the file on a new line and click Save.
    bc_BPwebTracking.png

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 a product tracking snippet from your Klaviyo account 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: "%%GLOBAL_ProductName%%",
    ProductID: %%GLOBAL_ProductId%%,
    ImageURL: ThumbURLs[0], // or ZoomImageURLs[0] if you'd like to use 1280x1280 images.
    URL: window.location.origin + window.location.pathname,
    Brand: "%%GLOBAL_BrandLink%%",
    Price: "%%GLOBAL_ProductPrice%%",
    CompareAtPrice: "%%GLOBAL_RetailPrice%%"
    };

    _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 go to your BigCommerce dashboard, and navigate to Storefront Design > My Themes.
  3. From the Current Theme, click the Edit HTML/CSS link. This opens the web editor.
    bc_editBPtheme.png
  4. Navigate to the Other Templates Files > Panels and click on the ProductDetails.html file. This loads the ProductDetails.html file into the web editor.
    bc_BPproductTracking.png
  5. Paste the code snippet after line 33.
    bc_BPpasteProductTrack.png

This enables product tracking on all of your product pages.

Note

To track the product price in numeric digits only, with no currency token, replace the %%GLOBAL_ProductPrice%% variable with this alternative variable: %%GLOBAL_RawProductPrice%%. This is necessary if you would like to target a Browse Abandonment flow based on the price of the viewed item.

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 0 found this helpful