Send New Products Alerts Using Klaviyo For Saved Search Terms

This set of workflows and theme code will allow you to enable your email subscribers to subscribe to new product alerts for specific keywords that they are interested in.

Then, when a new product launches, this will go through your subscribers and see if the new product matches their search terms and, if so, fire an event over to Klaviyo that will trigger a Klaviyo Flow to send them an email.

Watch The Demo

Search Results Page With Subscribe Form

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>

My Account Page Showing Saved Searches

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