Integrate with BigCommerce - Stencil Themes

read
Last updated at:

Overview

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

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 each theme type. 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 historical ecommerce, customer, and catalog data is synced into your Klaviyo account. The integration also 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 an active sync to capture future data.

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

  • Creating segments of your best customers
  • Triggering automated flow emails off of ecommerce events
  • Sending personalized messages including customer details and products from your catalog

This guide assumes that you're just starting out with Klaviyo, and you have not yet created an account.

If you have already created a Klaviyo account, skip ahead. Otherwise, read on.

Enable the BigCommerce Integration

I do not have a Klaviyo account yet:

If you are just starting out, head to Klaviyo.com and click Get Started to create an account. The Setup Wizard will prompt you to enter details about your business, including your ecommerce platform and your BigCommerce URL.

If you're installing the Klaviyo app from the BigCommerce App Marketplace, you will also be prompted to either create a Klaviyo account or login to your existing account during the workflow.

bc-setupwiz-storeurl.png

After completing the Setup Wizard, you can click the Integrations tab and verify that BigCommerce appears as an Enabled Integration.

bc-integration-enabled.png

I already have a Klaviyo account:

If you've already created your Klaviyo account, then it's likely you've integrated with BigCommerce when you walked through the setup wizard. To confirm, log in to your Klaviyo account and click the Integrations tab. Verify that BigCommerce appears as an Enabled Integration.

If you didn't integrate through the setup wizard, or if you're switching ecommerce platforms, then use walk through these steps to enable the integration:

You'll need your BigCommerce store's permanent address. From your BigCommerce admin, navigate to Account Settings > Account Summary to access your Account Summary page. Here you can find the Permanent Address for your store.

bc-permanent-address.png

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

Next, switch back to your Klaviyo account and navigate to your Integrations tab. Find BigCommerce on the list of All Integrations and click into the BigCommerce integration settings page.

Enter your permanent address, click Connect to BigCommerce. You'll be redirected to the Klaviyo app landing page inside your BigCommerce admin. Click Install and then Confirm to begin installing the Klaviyo BigCommerce app.

bc-klaviyio-app-confirm.png

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

bc-integration-success.png

Your data will begin to sync with Klaviyo in minutes. 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

Web tracking is enabled by installing a klaviyo.js file to your BigCommerce Store. 

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.

The klaviyo.js was automatically installed when you integrated with BigCommerce. No further action is required on your part, but you can verify that klaviyo.js has been installed by navigating to your Integrations tab, and then clicking into your BigCommerce Integration Settings page.

bc-accepts-marketing.png

If Automatically add Klaviyo onsite javascript (recommended) is enabled (checked off), then klaviyo.js has been added to your store. If not, enable that setting and click Update BigCommerce Settings.

For reference, this is the klaviyo.js code snippet:

<script async type="text/javascript"
src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=gKJEPb"
></script>

Add Viewed Product Tracking

Viewed Product tracking allows you to track when your customers are viewing your products. Viewed Product tracking is enabled by adding a Viewed Product code snippet into your BigCommerce Theme file. 

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

Now we're going to 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. This opens the web editor.

bc-edit-theme-files.png

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, your edits are not automatically moved to your new theme.

Navigate to templates > pages and scroll down to open the product.html page. At the bottom of this page, paste the Viewed Product code snippet. Then click Save.

bc-viewed-product-pasted.png

You have now enabled Viewed Product tracking on all of your product pages.

Data Synced into Klaviyo

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

BigCommerce event data can be viewed in your Klaviyo account, on the Metrics tab. Navigate to your Metrics tab, and select BigCommerce from the filter drop-down on the upper-right hand side to display all BigCommerce events. Notice that BigCommerce events are associated with the BigCommerce icon:

BigCommerce_Metrics.png

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

Test Your Integration

Now that your integration has been enabled and web and product tracking have been installed, it's time to test your integration to ensure that all features are working correctly.

First, navigate to your BigCommerce site. Add the following to the end of the URL, replacing "example@email.com" with your own email address: utm_email=example@email.com

bigcommerce-test-activeonsite.png

Click enter to reload the page with this updated URL. Doing this triggers Klaviyo's Active on Site web tracking.

If you open your Klaviyo account in a different tab, then navigate to Dashboard > Activity Feed, where you should be able to see your profile along with the Active on Site event. In the example screenshot below, I used a test email "jonbonklaviyo@gmail.com". You can see this profile on my Klaviyo Activity Feed.

bigcommerce-profile-activeonsite.png

Let's trigger a few more test events. Switch back to the tab with your store. Now, perform the following actions:

  1. Click through your site to view a product.
  2. Add the product to your cart.
  3. Start checking out. Use your email address, and remember to enable the Subscribe to our newsletter checkbox. 
  4. Complete your order using the BigCommerce Test Payment Gateway. (This won't cause any real charges, but it will create a real order you can sync to Klaviyo. You can enable this setting from your BigCommerce admin on the Store Setup > Payments tab. Scroll to the bottom of the screen and check the box labeled "Enable test credit card payments".)
    bc-enable-test-payments.png
  5. Last, switch back to your BigCommerce admin and navigate to the Orders tab. Your test order should be at the top of the list. Set the status of this order to "Awaiting Fulfillment". Klaviyo won't sync any orders that have a status of "Incomplete", "Pending", or "Awaiting Payment".

Now it's time to see the results of your testing. Switch into your Klaviyo account, and navigate to the Dashboard > Activity Feed. You should see your profile at the top of the activity feed. Click into your profile.

bigcommerce-sample-profile-test-integration.png

The profile page displays the results of the features we tested:

When we added the special tag "utm_emai=example@email.com" to the end of our store URL and reloaded the page, we triggered Klaviyo's Active on Site tracking. This added a profile to our Klaviyo account using the email address we provided. Moving forward, data will be stored on this customer's profile when they take additional action or when we sync data about them into Klaviyo.

Next, we navigated to a product page. This triggered our Viewed Product tracking. We can see the specific event stored on our profile's timeline. Knowing which products our customers are viewing can be valuable information when creating segments or when triggering a Browse Abandonment flow.

After viewing our product, we added it to our cart and started a checkout. Again, this sends a Started Checkout event to Klaviyo, and stores it on our customer's profile. Started Checkout events are essential to triggering one of Klaviyo's most powerful flows, the Abandoned Cart.

Last, we placed an order, and again this event was sent to Klaviyo and stored on our profile. Even a single order event gives us information about how much our customer has spent, the type of item they bought, and even the categories the item belongs to. All of this information is available when creating segments of customers to target with product specific campaigns or flows.

Also on our profile, we can see that we were added to our main Newsletter list. We know that customers who are on this list have opted-in to receiving marketing communications from us.

Add an Opt-In Checkbox to Your BigCommerce Checkout Page

Now that your BigCommerce integration is enabled, you can sync customers to a specific list in Klaviyo when they opt-in for your newsletter at checkout and when they place an order. You can do this by adding an opt-in checkbox to your BigCommerce checkout page. This is an example of a BigCommerce checkout page that has an opt-in checkbox enabled:  which allows customers to subscribe to your newsletter: 

bigcommerce-newsletter-optin.png

Let's learn how to add this checkbox to your BigCommerce checkout page. In your BigCommerce admin, navigate to Marketing > Email Marketing. Now fill in Newsletter Settings:

  • Check the box labeled "Allow Newsletter Subscriptions?".
  • We do not recommend checking the box labeled "Tick Newsletter Checkbox?." Customers that want to opt-in to your newsletter will find a way to opt-in either on your checkout page or through a signup form you provide. If "Tick Newsletter Checkbox?" is enabled by default, you run the risk of opting-in customers who did not take an explicit action to do so. When these customers receive your marketing emails, there is a higher risk your messages will be marked as spam.
  • When finished, click Save.

bigcommerce-enable-newsletter.png

Next, switch back to your Klaviyo account. On your Integrations tab, click into the BigCommerce integration. On the Integration Settings page, check the box labeled "Subscribe customers who Accept Marketing to a Klaviyo list."

From the dropdown, select the Klaviyo list you want your customers to be added to. We recommend using your main newsletter list.

bc-accepts-marketing.png

Once you've selected a list, click Update BigCommerce Settings. Now all customers that opt-in to your newsletter at checkout and place an order will be added to the Klaviyo list you selected.

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.

Use the Checklist for BigCommerce and Klaviyo for ideas on what to complete next.

If you experience any difficulties, Klaviyo provides both email and chat support. You can read about our support hours and other details in our Guide to Contacting Support, or reach out to contact our support team directly.

x
Was this article helpful?
35 out of 59 found this helpful