Implementing a custom Back In Stock Product Alerts button

This is an advanced feature and it is recommended to be handled by a developer with knowledge of Shopify theme editor and languages, such as HTML, CSS, Javascript and Liquid templating as required. 

Note: Please ensure all the below attributes are met in your custom button, for it works as expected.

There are just three steps to include our button to the product in the collections page:

Note : The collections button always appears if any one of the product variants is unavailable.

Step 1 – Add the button to your product-grid / .liquid that renders the product grid as a snippet like below.

   <!--   Swym Watchlist Button On product- tile   -->
  {% for variant in product.variants %}
     {%if  variant.available ==  false%}
  	    <a href="#" class="swym-button swym-custom-watchlist swym-add-to-watchlist-view-product" style='font-family : "swym-icons";' data-url ="{{ shop.url }}{{ product.url }}" data-variant-id="{{CURRENT SELECTED VARIANT ID}}" data-product-id="{{product.id}}"></a>
        {%break%}
     {%endif%}
  {% endfor %}

Note: Best to include it at the product-grid level, which will automatically include it on every product in the collections

Step 2 – Create a file (‘swym-custom.liquid’) in the snippets file and paste the below code.

swym-custom.liquid

<script>
  function swymCallbackFn(swat) {
    // your API calls go here
    attachNotifyMeEvents();
    function attachNotifyMeEvents() {
      var swymNotifyMeBtn = document.querySelectorAll(".swym-custom-watchlist");
      swymNotifyMeBtn.forEach(function(btn) {
        btn.addEventListener("click", addToWatchlist);
        btn.classList.add("swym-loaded");
      });
    }
    function addToWatchlist(eventObj) {
      eventObj.preventDefault();
      var productId = +eventObj.target.getAttribute("data-product-id");
      var variantId = +eventObj.target.getAttribute("data-variant-id");
      var du = eventObj.target.getAttribute("data-url");
      var params = {
        empi: productId,
        epi: variantId,
        du: du
      };
      swat.getProductDetails(params, function(productJSON) {
        productJSON.variants.forEach(function(v) {
          if (v.id == variantId) {
            params.pr = SwymUtils.formatProductPrice(v.price);
            params.iu = productJSON.featured_image;
            params.et = 8;
            swat.addToWatchList(eventObj, params, function(e) {
              console.log("Subscribed to product!", e);
            }); // Shows Subscribe me.
            return;
          }
        });
      });
    }
  }
  if (!window.SwymCallbacks) {
    window.SwymCallbacks = [];
 }
  window.SwymCallbacks.push(swymCallbackFn);
  </script>

Step 3 : Include the file right below the swymSnippet in the theme.liquid

 {% include 'swym-custom'%}

Optional CSS for Eye Icon

/* Swym CSS */

.swym-button.swym-custom-watchlist:after {
  content: '\e900';
  color: inherit;
  font-family: 'swym-icons';
   z-index : 10;
}

a.swym-button.swym-custom-watchlist {
    display: inline;
    position: relative;
    top: 7px;
    z-index : 10;
}

Still not working?

First thing first – to avoid disruption to your users, disable the Swym Back In Stock Product Alerts app (Shopify Apps > Back In Stock Product Alerts > Disable App)

Next up, go ahead and create a support ticket via the dashboard with any helpful info and we’ll follow up with you to get you set up.

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!