Integrate with a BigCommerce Catalyst store
Learn how to integrate with a BigCommerce Catalyst store, BigCommerce’s customizable, headless storefront.
The concepts in this article apply for any setup where you are using BigCommerce to power your ecommerce store’s backend, but have a custom storefront (a “headless” setup). This integration requires 2 main steps:
- Connect your BigCommerce store via Klaviyo’s native integration to sync order, catalog, and subscriber data.
- Set up code snippets to enable onsite tracking functionality.
Key integration components
The key components of integrating this type of ecommerce solution are:
- Customer data
Syncing information such as name, email, phone number, and other profile attributes. - Subscribers
Tracking who opts in and to what marketing channel (e.g., your email newsletter subscribers). - Order activity
Syncing when a customer places an order, what products are ordered, etc. - Products
Syncing the items in your catalog. - Onsite activity
Tracking who is active on your site, what products they view, etc.
With the exception of onsite activity, Klaviyo’s native BigCommerce integration will sync all of the above data for a BigCommerce Catalyst store because this data is fetched server-side via API.
Integrate your store
1. Connect your BigCommerce store via Klaviyo’s native integration
The first step is to integrate your BigCommerce store via Klaviyo’s native integration. Follow the Enable the BigCommerce integration steps in our Getting started with BigCommerce guide through step 11.
Do not check the setting Automatically add Klaviyo onsite JavaScript; you’ll add onsite tracking manually in step 2.
2. Enable onsite tracking
For Catalyst stores, you will need to use the repository provided by BigCommerce (detailed below) to install Klaviyo's onsite tracking JavaScript, which includes the following:
- Active on Site
Also known as Klaviyo.js. Klaviyo.js tracks when users are active on your site and enables Klaviyo forms. - Viewed Product
Tracks when users view specific products on your site (which can be leveraged in a browse abandonment flow). - Added to Cart
Tracks when users add items to a cart, which allows you to send cart abandonment flows.
The instructions detailed below will set up tracking for Active on Site, Viewed Product, and Added to Cart events:
- Clone the repository provided by BigCommerce and install its dependencies:
git clone [email protected]:bigcommerce-labs/catalyst-klaviyo.git && cd catalyst-klaviyo && pnpm i
- Copy the environment variable template and enter values for each variable. To help with the BigCommerce variables, you can run the create-catalyst CLI's init command:
pnpm create @bigcommerce/catalyst@latest init
- The
.env.local
file created by the init command above will not create theNEXT_PUBLIC_KLAVIYO_PUBLIC_KEY
variable, so we'll need to add that. Copy your Klaviyo Public API Key, and then run the command below replacingYOUR_PUBLIC_KEY
with the value retrieved from your account:
echo "\nNEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YOUR_PUBLIC_KEY" >> .env.local
You’ve now set up Klaviyo onsite tracking for BigCommerce Catalyst.
Server-side metrics
Now that you've connected your store, the following metrics will sync through Klaviyo’s native BigCommerce integration:
- Started Checkout
When customers start a checkout and a cart is created. - Placed Order
When a customer checks out and an order is created on your store. - Ordered Product
An event for each item in a processed order. - Fulfilled Order
When an order's status updates to either Shipped or Completed. - Cancelled Order
When an order is cancelled. - Refunded Order
When a customer’s order is refunded.
Additional resources
Klaviyo resources
BigCommerce resources
Updated 5 months ago