Back In Stock Inline for for Symmetry theme

bis-notify-me-js.liquid

<script>
/* Back In Stock app */
$(function() {
  
function createNotification(e) {
  var $productContainer = $(e.target).closest('div[data-product-id], #main-product-detail'),
    	productId = $(e.target).data('product-id'),
        email = $productContainer.find('[name=BIS_email]').val(),
        variantId;

  if ($productContainer.find('[name=id]').length > 0) {
	variantId = $productContainer.find('[name=id]').val();
  } else {
	variantId = $(e.target).data('default-variant-id');    
  }
  
  $productContainer.find('.BIS_response').text('');
  
  BISPopover.create(email, variantId, productId).then(function(data) { 
	var message = '';
    if (data.status == 'OK') {
		message = data.message;
    } else {
      for (var k in data.errors) {
      	message += data.errors[k].join();
      }
    }
    
    $productContainer.find('.BIS_response').text(message);
  });
  }
  
  $('body').on('click', '.BIS_submit', createNotification);
  
});
</script>

bis-notify-me.liquid

<!-- Back In Stock app -->
<form>
  <p>
  	<input placeholder="Email address" type="email" name="BIS_email" id="BIS_email">
    <button type="button" data-product-id="{{product.id}}" data-default-variant-id="{{product.variants.first.id}}" class="BIS_submit">Notify Me When Available</button>
  </p>
  <p class="BIS_response"></p>
</form>

Installation instructions

1. Upload both files to your theme under Snippets
2. Open snippets/product-detail.liquid and find the line This product is unavailable
3. After that line add {% include 'bis-notify-me' with product %}
4. Hit save for product-detail.liquid
5. Open layouts/theme.liquid
6. At the bottom just before </body> add {% include 'bis-notify-me-js' %}
7. Hit save for theme.liquid