HomeGuidesAPI Reference
ChangelogHelp CenterCommunityContact Us
Guides

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:

  1. Connect your BigCommerce store via Klaviyo’s native integration to sync order, catalog, and subscriber data.
  2. 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:

  1. Clone the repository provided by BigCommerce and install its dependencies:
    git clone [email protected]:bigcommerce-labs/catalyst-klaviyo.git && cd catalyst-klaviyo && pnpm i
  2. 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
  3. The .env.local file created by the init command above will not create the NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY variable, so we'll need to add that. Copy your Klaviyo Public API Key, and then run the command below replacing YOUR_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