🛠 Fix: Passing the Correct Variant Image to Klaviyo for “Add to Cart” Events

Products and Orders APIs
1

Issue:

When a customer adds a variant to their cart on a Shopify store (e.g., selecting a red shirt, size L), the image passed into the Klaviyo “Add to Cart” email is often the default product image, not the actual variant image they selected.

This happens because Shopify’s default Add to Cart event payload doesn’t include variant-specific image data, and Klaviyo’s standard integration doesn’t address this.

the_problem
the_problem1662Ă—1151 188 KB

:magnifying_glass_tilted_left: Why This Matters

  • Customers receive automated emails showing the wrong product image.
  • This undermines trust, increases confusion, and potentially reduces conversion.
  • The problem is subtle and often goes unnoticed until reported by customers.

:white_check_mark: The Solution

I built a workaround using Shopify’s AJAX API and Klaviyo’s JavaScript SDK to pass the correct data:

  1. Use Shopify’s /cart/add.js endpoint
    This returns a JSON payload that includes the exact variant added — along with its image.
  2. Capture the variant image URL in JavaScript
    After intercepting the cart response, extract variant.image.
  3. Send a custom Klaviyo event
    Use window._learnq.push() to fire a custom “Added to Cart with Variant” event that includes the correct image.
  4. Update Klaviyo Flows to use this new event
    Your Abandoned Cart flow (or Add to Cart reminders) can now pull the correct variant image from event data.

the_solution
the_solution1662Ă—1151 213 KB

:test_tube: Preview of the Data Structure

fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    items: [{
      id: variantId,
      quantity: 1
    }]
  })
})
.then(res => res.json())
.then(data => {
  const variantImage = data.image;
  window._learnq.push(['track', 'Added to Cart with Variant', {
    Name: data.product_title,
    Variant: data.variant_title,
    ImageURL: variantImage,
    ProductURL: window.location.href
  }]);
});

:brain: Why I’m Sharing This

I found multiple threads in both the Shopify and Klaviyo communities describing this issue, but no complete solution — so I decided to publish mine publicly.

If anyone else is dealing with this, I’d love to hear how you’ve solved or worked around it. Or if you’re building a more complete event-tracking framework across Shopify and Klaviyo, let’s trade notes.

:video_camera: I also created a video walkthrough of the issue + solution:

—

Paul Boutros
Wulirocks Founder
Linkedin
WebSite
Blog

2

Hey Paul! Thanks for writing about your approach to supporting this! This is a great solution :slight_smile: I’ll share this with my network too!