A client came to me with a seemingly simple but tricky request:

They wanted a Klaviyo form on their Shopify product pages to capture the SKU of the product being viewed and pass it along with the form submission. This SKU needed to be stored as a profile property in Klaviyo so they could later segment audiences and trigger flows based on which products were out of stock or of interest.

My client was using Replo page builder for Shopify product pages. This added a little bit more complexity as I had to figure out how to fetch the product SKU from a Replo page.

My Approach

I broke the problem down into two parts:

1. Where to reliably fetch the SKU from a Replo page.
   After inspecting the page’s HTML, I discovered that Replo injects a JSON blob (<script id="replo-deps-template-product">) containing all product and variant data—including SKUs. By parsing this JSON on load, I could always resolve the correct SKU for the currently selected variant.
2. How to push that SKU into Klaviyo at the right moment.
   Since Klaviyo’s hidden fields weren’t accepting values from the submit event, I turned to Klaviyo’s JavaScript tracking library (_learnq). Using identify, I could directly update the profile property for the user submitting the form, without having to fight with how Klaviyo renders hidden fields inside its embed.

This way, I bridged the gap between Replo’s product data and Klaviyo’s tracking system.

The Solution

Here’s the solution I implemented:

• Step 1: Parse the replo-deps-template-product JSON on page load and map out product variants.
• Step 2: Add a listener for Klaviyo’s klaviyoForms event, scoped only to the form ID I needed.
• Step 3: On submit, resolve the currently selected SKU from the parsed Replo JSON.
• Step 4: Use _learnq.push(['identify', { 'SKU': sku, $email: e.detail.metaData.$email }]) to attach that SKU to the Klaviyo profile of the submitting user.

When I tested it in DevTools, I could see in the Network tab that Klaviyo was receiving a profile update request with SKU: ‘ ‘ (or whichever SKU matched the variant). Finally, checking the user’s profile in Klaviyo confirmed that the property was being updated.

Here’s a complete, production-ready script that:

1. Works on a Replo product page (parses the replo-deps-template-product JSON).
2. Listens for the Klaviyo form submit event.
3. Runs only for the form you specify (via TARGET_FORM_ID).
4. Uses Klaviyo’s _learnq.identify to update the profile with the selected variant’s SKU.

<script>
document.addEventListener("DOMContentLoaded", function() {
  console.log("[OOS SKU] Script loaded");

  // 1) Parse Replo product JSON
  const el = document.getElementById('replo-deps-template-product');
  if (!el) {
    console.warn("[OOS SKU] Replo product JSON not found");
    return;
  }

  let parsed;
  try {
    parsed = JSON.parse(el.textContent);
  } catch (e) {
    console.error("[OOS SKU] Failed to parse Replo JSON", e);
    return;
  }

  const product  = parsed?.data || parsed;
  const variants = Array.isArray(product?.variants) ? product.variants : [];
  if (!variants.length) {
    console.warn("[OOS SKU] No variants found in Replo JSON");
    return;
  }

  // 2) Helpers to get current variant + SKU
  function getVariantId() {
    const m = location.search.match(/[?&]variant=(\d+)/);
    return m ? m[1] : (variants[0]?.id || null);
  }

  function getCurrentSku() {
    const id = getVariantId();
    const v  = variants.find(v => String(v.id) === String(id));
    const sku = v ? String(v.sku || '').trim() : '';
    console.log("[OOS SKU] Resolved SKU:", sku);
    return sku;
  }

  // 3) Only run for a specific Klaviyo form
  const TARGET_FORM_ID = "F12345"; //  replace with your actual form ID from Klaviyo

  // 4) Listen for Klaviyo form submissions
  window.addEventListener("klaviyoForms", function(e) {
    if (e?.detail?.type !== "submit") return;

    console.log("[OOS SKU] Received Klaviyo submit:", e.detail.formId);

    if (String(e.detail.formId) !== TARGET_FORM_ID) {
      console.log("[OOS SKU] Ignored form", e.detail.formId);
      return;
    }

    const sku = getCurrentSku();
    if (!sku) {
      console.warn("[OOS SKU] No SKU resolved for this variant");
      return;
    }

    // 5) Build payload
    const md = e.detail.metaData || {};
    const payload = { 'OOS SKU': sku };
    if (md.$email) payload.$email = md.$email;
    if (md.$phone_number) payload.$phone_number = md.$phone_number;

    // 6) Send to Klaviyo
    window._learnq = window._learnq || [];
    window._learnq.push(['identify', payload]);

    console.log("[OOS SKU] identify pushed with:", payload);
  });
});
</script>

Key things you need to do:

1. Replace F12345 in TARGET_FORM_ID with the real Klaviyo form ID (6-character alphanumeric, e.g. Qb7xGp). You can find this in the form’s URL in Klaviyo.
2. Publish the script on your Replo product page(s).
3. Submit the form once with your own email, then check your profile in Klaviyo → Profiles. You should see SKU appear with the variant’s SKU (e.g., BPVOLT, BPMID, etc.).

The Outcome

The client now has a form that not only captures user information but also ties it directly to the product SKU the user was interested in. This enables them to:

• Build precise segments
• Trigger automated flows when those SKUs come back in stock.
• Gain deeper insight into demand for specific variants.

Need help with Klaviyo and Shopify integrations? Reach out to me.