How to add a sold out waiting list to your product page

When your stock reaches zero, this code triggers a pop up lightbox that allows you to collect email addresses.

Create a page with the form and make the URL /sold-out-waitlist.

The Lightbox Anything Plugin is required.

<!-- Sold Out Waitlist -->
<style>
.sqs-add-to-cart-button:nth-child(2),
.product-variants[data-selected-variant]:not([data-variant-in-stock])~.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button:nth-child(1) {
  display: none;
}
.product-variants[data-selected-variant]:not([data-variant-in-stock])~.sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button:nth-child(2) {
  display: block;
  opacity: 1;
  cursor: pointer;
}
</style>
<script>
function soldOutWaitlist() {
  var productVariants = document.querySelector('.product-variants');
  var cartButton = document.querySelector('.sqs-add-to-cart-button');

  if (!cartButton || !productVariants) {
    return null;
  }

  var button = document.createElement('a');
  button.className = 'sqs-add-to-cart-button';
  button.href = '#lightbox>sold-out-waitlist';
  button.textContent = 'Tell me when available';
  cartButton.parentNode.appendChild(button);
}

document.addEventListener('DOMContentLoaded', soldOutWaitlist);
window.addEventListener('mercury:load', soldOutWaitlist);
</script>
<!-- end Sold Out Waitlist -->

<!-- Plugin Lightbox -->
<link href="/s/plugin-lightbox.css" rel="stylesheet">
<script src="/s/plugin-lightbox.js"></script>
<script>pluginLightbox();</script>
<!-- end Plugin Lightbox -->