How to Integrate Klaviyo with Your Headless CMS

What is Klaviyo?

Klaviyo is a marketing automation platform for email, SMS, push notifications, customer profiles, segmentation, and revenue reporting. Ecommerce, retail, and B2C marketing teams use it to run flows like welcome series, abandoned cart, product drops, back-in-stock alerts, and post-purchase campaigns. Its core strength is connecting customer behavior and profile data to personalized messages across owned channels.

Why integrate Klaviyo with a headless CMS?

Klaviyo campaigns move fast. A product drop might need a landing page, three emails, two SMS messages, UTM-tagged links, localized copy, and a post-purchase flow, all before Friday at 9 a.m. If your site content and Klaviyo content live in separate places, teams end up copying titles, prices, promo codes, product images, and disclaimers by hand. That creates small mistakes that get expensive, like an expired offer in an SMS, a mismatched product image in an email, or a landing page URL without campaign tracking.

Architecture overview

A typical Sanity and Klaviyo integration starts when an editor publishes content in Sanity Studio, such as a product launch, offer, buying guide, or campaign landing page. A Sanity webhook fires on the publish mutation and sends the document ID, type, and operation to a Sanity Function or your own webhook endpoint. That server-side code verifies the webhook secret, then uses @sanity/client to query the Content Lake with GROQ. The query can pull the fields Klaviyo needs, including joined references like brand, category, localized slug, primary image URL, price, promo code, and publish window.

Common use cases

Step-by-step integration

1. 1

   Set up Klaviyo access

   Create or use a Klaviyo account, then create a private API key in Settings. Add only the scopes your integration needs, such as Catalogs Write for product content, Events Write for flow triggers, and Profiles Read if you need to look up customers. Install packages with npm install @sanity/client klaviyo-api.

2. 2

   Model the content in Sanity Studio

   Create schemas for the content Klaviyo will use. Common fields include title, slug, shortDescription, heroImage, price, brand, category, promoCode, startsAt, endsAt, audienceTags, locale, and klaviyoCatalogId. Keep marketing copy in plain text or Portable Text fields that you intentionally serialize for email.

3. 3

   Create the publish trigger

   Add a Sanity webhook that fires on publish for the document types you want to sync, such as product, offer, article, or campaign. Use a GROQ-powered filter so test documents, drafts, and unrelated content don't call Klaviyo.

4. 4

   Add server-side sync logic

   Handle the webhook in a Sanity Function, Next.js route, or small middleware service. Verify the webhook secret, fetch the full document from the Content Lake with GROQ, map it to Klaviyo's API format, and call Klaviyo with your private API key from the server only.

5. 5

   Connect to Klaviyo's API

   Use Klaviyo's Catalogs API for product or merchandised content, and use the Events API when a published item should trigger or feed a flow. Include Klaviyo's revision header, handle 4xx validation errors, and log the Sanity document ID with each Klaviyo response.

6. 6

   Test the customer experience

   Publish a test document, confirm the catalog item or event appears in Klaviyo, add it to a campaign or flow, and send test emails and SMS messages. Check image dimensions, URL tracking, personalization fallbacks, consent rules, and what happens when content is unpublished.

How Sanity + Klaviyo works

CMS approaches to Klaviyo

Keep building

Explore related integrations to complete your content stack.