How to Integrate with BigCommerce - Stencil Themes

read
Last updated at:

Overview

This article walks through how to enable the BigCommerce integration in Klaviyo, confirm that web tracking is working properly, and add Viewed Product tracking so that you can see when customers view products in your store. 

BigCommerce has two theme platforms: Stencil and Blueprint. Stencil themes are newer than the legacy Blueprint themes. The integration process is the same for both theme styles, but the location of some menu items and the location of where you paste code snippets is different for each platform. If you are using a BigCommerce Blueprint theme, head over to this article: Integrate with BigCommerce - Blueprint Themes.

This article covers integrating BigCommerce with a Stencil theme.

When you integrate with BigCommerce, your historic ecommerce, customer, and catalog data is synced into your Klaviyo account. The integration automatically adds Klaviyo's web tracking snippet to your BigCommerce store, which allows you to add Klaviyo signup forms to your site and track when your customers are active on site. The BigCommerce integration also sets up a real-time sync to capture future data.

With all of of your BigCommerce data synced into Klaviyo, you'll be able to use a number of Klaviyo's core features, such as:

  • Segments
    • to target your best customers
  • Flows
    • to automate messaging off of ecommerce events
  • Campaigns: 
    • to send personalized messages including customer details and products from your catalog

Enable the BigCommerce Integration

There are three ways to connect your BigCommerce store to Klaviyo:

  • Through the BigCommerce App Marketplace, where you will be prompted to either create a Klaviyo account or log in to your existing account during the workflow
  • Through the Klaviyo account setup wizard
  • Through the integrations tab in your Klaviyo account

In this guide, we will be using the third method, the integrations tab.

No matter how you integrate, the outcome is the same. If you’ve yet to integrate with your store, or if you're switching ecommerce platforms, then follow the steps below to enable the integration through the integrations tab.

Open your Klaviyo account, the admin for your BigCommerce store, and your BigCommerce storefront in separate tabs.

First, navigate to the Integrations tab in Klaviyo and click All Integrations; Search for BigCommerce and click on the integration to edit the settings.mceclip0.png

Under Store URL, enter your store’s permanent address.

Your store's permanent address is not the same as your store's URL where customers visit your store. The permanent address is a special URL BigCommerce uses to manage your store.

To find this address, go into your BigCommerce admin and navigate to Account Settings > Store Details. Scroll down to find the Permanent Address for your store.mceclip1.png

Check the box to automatically add Klaviyo onsite javascript, which will allow web tracking and onsite forms.

Next, if you’d like to collect email subscribers at checkout, check Collect email subscribers. This will subscribe contacts who opt in during a checkout or through BigCommerce footer form. Choose which Klaviyo list from the dropdown you would like to add subscribers to. If you prefer, you can create a new list instead. 

To collect SMS subscribers who opt in via BigCommerce, check the setting to Collect SMS subscribers.  Before you can enable this setting, you must first set up SMS for your Klaviyo account. If you decide to collect SMS subscribers at checkout, choose the list you want them to be added to from the dropdown. You will also be prompted to include links to your Terms of Service and Privacy Policy, and copy a code snippet to your BigCommerce checkout file. For instructions on how to do this, follow our guide to collecting SMS consent at checkout with BigCommerce. You must also add disclosure language for TCPA compliance

Click Connect to BigCommerce and confirm the integration. Click to integrate your store, which will then bring you to the Klaviyo app in the BigCommerce App Marketplace. mceclip2.pngmceclip5.png

Click Install and review the listed terms before confirming. Then, click Confirm. Your Klaviyo account will open within your BigCommerce admin window. A green success callout will confirm that your sync has started, and your data will begin to sync to Klaviyo in minutes.mceclip4.png

You've successfully enabled the BigCommerce integration.

At this point, you can get back to your Klaviyo account by opening a new tab, and navigating to www.klaviyo.com/account.

Confirm Web Tracking Installation

When you integrated with BigCommerce, a klaviyo.js file which enables web tracking was automatically installed in your BigCommerce store if you checked the relevant setting. Klaviyo.js does two things:

  • It enables you to add Klaviyo signup forms to your site directly from your Klaviyo account.
  • It adds Active on Site tracking, which allows you to track when your customers access your site.

No further action is required on your part, but you can verify that klaviyo.js is working correctly. 

In your Klaviyo account, click the dropdown under your account name and select Setup Web Tracking. You already completed the first step when integrating, and the second step will be covered in the next section on Viewed Product tracking. 

Go to the third step and enter your store URL in the box, then click Next. Click on the link that’s generated to be redirected to your store. mceclip6.pngBack in Klaviyo, check for the success button that data has been received.mceclip7.pngThis means that web tracking is working successfully. Click the green success button to be brought back to your Klaviyo dashboard. Now, you can use onsite forms, see when visitors are active on your site, and see when they view products.

Add Viewed Product Tracking

Viewed Product tracking allows you to track when customers view your products. To enable Viewed Product tracking, you will need to  add a Viewed Product code snippet to your BigCommerce Theme file. 

Viewed Product tracking is necessary for building flows such as a browse abandonment flow, which you can learn more about in Creating a Browse Abandonment Flow.

First, copy the BigCommerce Viewed Product 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>

Next, paste the Viewed Product code snippet into your BigCommerce theme file. In a new tab, log in to your BigCommerce dashboard and navigate to Storefront > My Themes.

From the Current Theme, click the Advanced Settings dropdown and click Edit Theme Files. If you're working with a default theme, the option to edit theme files will not appear. First, make a copy of the theme, and then make your edits to the copy. Any edits you make will only apply to the theme you are editing. Note that if you change your theme in the future, you will need to install Viewed Product tracking to your new theme.

Click Edit Theme Files to open the web editor.

bc-edit-theme-files.png

Navigate to Templates > Pages, scroll down, and click to open the product.html page. At the bottom of this page, paste the Viewed Product code snippet. Then click Save all files. mceclip8.pngYou have now enabled Viewed Product tracking on all of your product pages.

Data Synced into Klaviyo

The BigCommerce integration syncs with Klaviyo in real-time.

After you've enabled your BigCommerce integration, it will 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, refund, and canceled order data.
  • When people visit your website and what products and collections they view.

To view BigCommerce event data in your Klaviyo account, navigate to the Analytics tab, click into Metrics, and select BigCommerce from the filter drop-down on the upper right-hand side to display all BigCommerce events. BigCommerce events are associated with the BigCommerce icon.

mceclip0.png

Read more about Understanding Your BigCommerce Data for a full reference of all the types of data and specific events that sync to Klaviyo.

Klaviyo limits the number of unique metrics you can create to 200. When you approach this threshold, you will be alerted via a warning in your account, along with an email to the account owner.

Next Steps

Congratulations on getting set up! Now that you've got your integration running, it's time to start adding Klaviyo's core features so you can start making money and growing your business.

After you complete the items in this category, you'll be all set to get the most out of Klaviyo's features. 

Additional Resources

x
Was this article helpful?
121 out of 183 found this helpful