Integrate with BigCommerce - Stencil Theme

read

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 entering your BigCommerce store URL into your Klaviyo account and installing the Klaviyo app in your BigCommerce store.

Enabling the integration and installing the Klaviyo app allows your BigCommerce event data to sync with your Klaviyo account. This data includes the following events:

  1. In your Klaviyo account, click the Integrations tab, and search for the BigCommerce Integration.
  2. From your BigCommerce Account Summary page, find the Permanent Address for your store.

    Note

    Users with multiple BigCommerce stores: if you encounter any issues with this step, make sure you are logged in to your Klaviyo account and to the specific BigCommerce store you are trying to integrate.

  3. Switch back to your Klaviyo account and enter your entire Permanent Address in the Store URL field. Click Connect to BigCommerce. If you have not already done so, you are prompted to log in to your BigCommerce admin.
    On this page you have the option to "Subscribe customers who Accept Marketing to a Klaviyo list." This adds users that accept marketing to the list you select on this page. Read more about this feature in the section at the end of this article.
  4. You are redirected to the Klaviyo app landing page inside your BigCommerce admin. Click Install and then Confirm to begin installing the Klaviyo BigCommerce app.

    Note

    At this step, search for the Klaviyo app if you are not automatically recirected to the Klaviyo app landing page.

  5. Your Klaviyo account will open within your BigCommerce admin window. A green success callout confirms that your sync has started.

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

Add Web Tracking to your BigCommerce Store

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

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

  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

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

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

  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.

Subscribe Users that Accept Marketing at Checkout

On the BigCommerce integration page you have the option to sync users who accept marketing to a list in your Klaviyo account.

For example, the image below shows the final page of a default BigCommerce checkout. You can see the customer has the option to receive your newsletter. If the customer checks this box and places an order, they are then added to the list you selected on your BigCommerce integration page.

bigcommAcceptsMarketing.png

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