How to Integrate with BigCommerce - Stencil Themes

Last updated at:


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 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 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

Enable the BigCommerce Integration

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


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 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. Click through to your store name; here you can find the Permanent Address for your store.


Your store's permanent address is not the same as your store's URL. The permanent address is a special URL BigCommerce uses 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, then 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.


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.

At this point, you can get back to your Klaviyo account by opening a new tab, and navigating to

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.


If Automatically add Klaviyo on site 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. Be sure to replace "PUBLIC_API_KEY" with your account's public API key:

<script async type="text/javascript"

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. 

Viewed Product tracking is extremely useful 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 Product Tracking code snippet below:

<script type="text/javascript"> 
var _learnq = _learnq || []; 

 var item = {
   Name: "{{product.title}}", 
   ProductID: "{{}}",
   ImageURL: "{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}", 
   URL: "{{product.url}}",
   Brand: "{{}}", 
   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

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.


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 & apply all files.


You 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, 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 within the Analytics tab. 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. Notice that 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 are synced 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.

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 "" with your own email address: ?


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 "". You can see this profile on my Klaviyo Activity Feed.


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".)
  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.


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

When we added the special tag "" 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

The instructions below are for email only. For details on adding an SMS opt-in checkbox, view this article on enabling SMS consent at checkout

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: 


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.


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.


Once you've selected a list, click Update BigCommerce Settings. Now all customers that opt-in to your newsletter at checkout 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.

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

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.

Additional Resources

Was this article helpful?
115 out of 175 found this helpful