Want to use email notifications for when cross sells are out-of-stock? Then this article is for you (NOTE: if you're not familiar with html & javascript, get in touch or pass this on to your development team).

Requirements:

- installation of the BackInStock app: https://apps.shopify.com/back-in-stock

Steps:

1) Create a custom override file for Cross Sell. You can use this one (it has the code already): https://raw.githubusercontent.com/cross-sell/diy-themes/master/extras/backInStock-integration.liquid but be aware that it uses our Slick theme CSS styling.

2) We will now follow some similar steps from BackInStock's integration article but with some minor variations: https://help.backinstock.org/article/103-add-a-back-in-stock-button-to-the-collection-page

Add the following code before our output variable xsellLib.xselloutput:

<span style="font-size: 18px;">      function escapeHtml(unsafe) {        return unsafe        .replace(/&/g, "&")        .replace(//g, ">")        .replace(/"/g, """)        .replace(/'/g, "'");      }      var xs_atc ='<form method="post" action="/cart/add"><input type="hidden" name="id" value="'+xsproductdata.variants[0].id +'"><input type="submit" value="Add to Cart" class="btn"></form>';      var parsed = escapeHtml(JSON.stringify(xsproductdata));      if(!xsproductdata.available){       xs_atc = '<button class="BIS_trigger ProductItem__BISButton Button Button--secondary" data-product-data="'+parsed+'">SOLD OUT</button>';      }</span>

Instead of using this liquid tag: {{ product | json | escape }} we are using some custom JS to stringify our cross sell product object, and then using a custom escape function to avoid errors with special characters.

3) Add this line of code for the Add To Cart button

                          + xs_atc

AFTER this line of code (our price output variable):

                          + xspriceoutput

Your file should now look something like this:

4) Test. Test. Test. We suggest working on a duplicate theme and NOT YOUR LIVE THEME.

‍