Integrate with BigCommerce - Stencil Themes

read

Overview

This guide walks you through the main steps for integrating with BigCommerce. Integrating with BigCommerce syncs your historical ecommerce, customer, and catalog data from your store into your Klaviyo account, and sets up a sync to capture all future data. The integration also adds Klaviyo's web tracking snippets, which allows you to add Klaviyo signup forms to your site, as well as track when your customers are active on your site or view specific products. With all of this data syncing inside of your Klaviyo account, you'll be set up 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.

Step 1 - 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 have already created your Klaviyo account, then likely you integrated when working through the setup wizard. 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 the following steps to enable the integration.

First, the one piece of information you need is your BigCommerce store's permanent address. From your BigCommerce admin, click 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 click into 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 are 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 open a new tab, and navigate to www.klaviyo.com/account to get back to your Klaviyo account.

Step 2 - Sync Your BigCommerce Customers to a Klaviyo List

You can sync customers to a specific list in Klaviyo when they opt-in to your BigCommerce newsletter at checkout and then place an order. You can see an image of the opt-in checkbox on a sample BigCommerce checkout page below. The checkbox allows customers the option to Subscribe to our newsletter.

bigcommerce-newsletter-optin.png

First, let's cover a few BigCommerce settings. To enable your newsletter checkbox on the checkout page, navigate to Marketing > Email Marketing in your BigCommerce admin. Check the box labeled "Allow Newsletter Subscriptions?".

Also on this page, we recommend you do not check 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. Automatically checking this box runs the risk of opting in customers who did not take the explicit action to do so. When these customers receive your marketing emails, there is a higher risk your messages will be marked as spam.

bigcommerce-enable-newsletter.png

Next, switch back to your Klaviyo account. Click into your Integrations tab, and 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 your 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 to update your integration and save your changes. Now all of your customers that opt-in to your newsletter at checkout and place an order will be added to the Klaviyo list you selected.

Step 3 - Install Klaviyo.js and Viewed Product Tracking

This section walks through installing Klaviyo's web snippets: klaviyo.js and Viewed Product tracking.

Klaviyo.js does two things:

  • First, it enables you to add Klaviyo signup forms to your site directly from your Klaviyo account.
  • Second, it adds Active on Site tracking, which allows you to track when your customers are accessing your site.

Viewed Product tracking allows you to track when your customers are viewing your products.

Let's walk through installing these snippets.

The klaviyo.js is automatically installed when you integrate. You can verify this by logging into your Klaviyo account, clicking on the Integrations tab, and clicking into your BigCommerce integration settings page.

bc-accepts-marketing.png

If the checkbox to Automatically add Klaviyo onsite javascript (recommended) is checked, then klaviyo.js has been added to your store. If not, check the box and click the button to Update BigCommerce Settings.

Next, to install Viewed Product Tracking, first log in to your Klaviyo account, click the Account dropdown, and click Setup Web Tracking.

bc-setup-webtracking.png

This takes you to your web tracking page, where you will find your klaviyo.js snippet and your Viewed Product Tracking snippet. Click into the second snippet and copy the the code. Keep this tab open in case you need to reference this snippet later.

bigcommerce-webtracking-snippets.png

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, then make your edits to the copy. Any edits you make only apply to the theme you are editing. If you change your theme in the future, your edits will not but 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 in the Viewed Product snippet you copied before and click Save.

bc-viewed-product-pasted.png

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

Step 4 - Test Your Integration

The last step to getting set up is to test out all of your integration's features to ensure they are working correctly.

First, walk through the following steps:

Navigate to your 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, 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 check the box to subscribe to your newsletter.
  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 is time to see the results of your testing. Switch in to 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

We can see the result of a number of different Klaviyo features in action on this profile page.

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. Going forward, whenever this customer takes additional actions, or whenever we sync data about them, it gets stored on their profile.

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 the 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 with a single order event, now we have 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.

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.

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.

As well, if you experience any difficulties, Klaviyo provides both email and chat support. Email support is available for all customers, while chat support is available for customers on paid plans. 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?
21 out of 32 found this helpful