Send New Products Alerts Using Klaviyo For Saved Search Terms

This set of workflows and theme code allows your email subscribers to receive alerts for new products matching their specific keywords. When a new product is launched, the workflow checks against subscribers’ saved search terms and triggers an event in Klaviyo if there’s a match. This event initiates a Klaviyo Flow, sending a personalized email to subscribers about the new product. Enhance customer engagement and drive sales by keeping your subscribers informed about the products they care about most.

Watch the demo

Example: Search results page with subscribe form

Form code

And here’s the code that you would need to drop into the Search section in your theme:

<div class="page-width">
  <h2>Get email alerts when new products match this search</h2>
  
  <form id="mesa-form" style="max-width: 15em;"></form><script src="https://mymesa.site/kalen-jordan-dev/forms/new-product-alerts-form-to-subscribe-to-klaviyo.js"></script>
</div>

Example: Account page showing saved searches

Account Liquid code

And here’s the code that you would need to drop into the Customer Account section in your theme:

<div class="customer account">
  <h2>Saved Search Alerts</h2>
  <ul id="mesa-saved-searches">

  </ul>
</div>

<script type="text/javascript">
  fetch('https://webhooks.getmesa.com/v1/kalen-jordan-dev/webrequest/65b8f60ffaa1a163ec2430b9/65b8f6135286116c286cdbe5.json?apikey=pobbFlA9BN73tE4gkbUsb5DLnZnwfIKi8g8UtM7U&[email protected]')
  .then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // Use this for JSON responses
  })
  .then(data => {
    console.log(data);
    let wrapper = document.getElementById('mesa-saved-searches');
    let deleteUrl = "https://webhooks.getmesa.com/v1/kalen-jordan-dev/webrequest/65bba936e752db311c73465b/65bba936e752db311c73465d.json?apikey=pobbFlA9BN73tE4gkbUsb5DLnZnwfIKi8g8UtM7U";
    for (let row of data.search_terms) {
      wrapper.innerHTML += `
        <li>
          ${row.term} - <a href="${deleteUrl}&key=${row.key}" target="_blank">delete</a>
        </li>
      `;
    }
  })
  .catch(error => {
    console.error('There was a problem with your fetch operation:', error);
  });
</script>

Workflow 1: Subscribe form

Workflow 2: When new product created, fire Klaviyo events

Workflow 3: Get existing saved searches

Workflow 4: Delete existing saved search term

Klaviyo Flow

Questions about this workflow demo? Contact:

Kalen Jordan

MESA Service Partner