Integrate with BigCommerce - Blueprint 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. Stencil themes are newer than the more 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 some code snippets is different for each theme type. If you are using a BigCommerce Stencil theme, head over to this article:  Integrate with BigCommerce - Stencil Themes.

This article covers integrating BigCommerce with a Blueprint theme.

Enable the BigCommerce Integration

There are two steps to enabling the BigCommerce integration. First you'll need to enter your BigCommerce store URL into your Klaviyo account.  Then you'll install the Klaviyo app in your BigCommerce store.  

  1. First we'll copy your BigCommerce store URL. Log into your BigCommerce account, and navigate to your BigCommerce Account Summary page. Copy the Permanent Address for your BigCommerce store.

    If you have multiple BigCommerce stores, make sure you are logged into both your Klaviyo account and the specific BigCommerce store you are trying to integrate. You may run into integration issues if you are not logged into both accounts. 

  2. Switch into your Klaviyo account, and navigate to the Integrations section. On the All Integrations tab, search for the BigCommerce integration. Then click Add Integration.
    BigComm_Int1.png
  3. Enter your integration settings:
    • Paste the entire Permanent Address (including the https://) in the Store URL field.
    • Enable the Subscribe customers who Accept Marketing to a Klaviyo list checkbox. You'll be prompted to select a Klaviyo list which BigCommerce subscribers will be added to. We often recommend selecting the Newsletter list. You can come back to integration settings and change your subscription list at a later time.
    • We recommend enabling the Automatically add Klaviyo onsite javascript (recommended.) checkbox. This will automatically enable web tracking by installing the klaviyo.js code snippet to your BigCommerce store.
    BigComm_int2.png
  4. Click Connect to BigCommerce. If you have not already done so, you are prompted to log in to your BigCommerce admin.
  5. You will 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_klaviyoapp_confirm.png
  6. 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.

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

Product tracking allows you to record and analyze when customers that already exist in your Klaviyo account view products in your store.

This process walks you installing Product Tracking to your BigCommerce Store. This is accomplished by copying a product tracking code snippet and pasting it within your BigCommerce Blueprint theme.

  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. Go to your BigCommerce dashboard, and navigate to Storefront > 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 the line that reads "//]]></script>" (around lines 26-33).
    bc_BPpasteProductTrack.png

This enables product tracking on all of your product pages.

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 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. 
    mceclip0.png
  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:  

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 grow 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?
6 out of 8 found this helpful