Enabling Back in Stock Alert Buttons on Collections Pages

Some themes do an excellent job informing viewers when a product in a collection is out of stock, generally with a “Sold Out” tag. If a customer is interested in one of those products and wishes to receive an automated alert, they should be able to do so directly from the Collections page.

Skipping this forces them to visit the product detail page to sign up for at notification, adding unnecessary friction which can be avoided. On a mobile device with a slower network connection this could mean the difference between successfully engaging that user and losing them entirely. 

How to Enable Back in Stock Alert Buttons on Collections Pages

Step 1: Navigate to your theme and click Actions >  Edit code

Step 2: Find the name of the file that renders your product titles.

Usually, a file named collections-template.liquid contains this file as an include to render products on Collections pages.

It can be identified as it contains the code {% include ‘product-card-grid’%} or sometimes as {% render ‘product-card-grid’%}

The product-card-grid’ is an example of a file that renders the product tiles on your collections page based on your theme / dynamic section. The file name may vary across different themes.

Once you know the name of the file that renders the product tiles on your collections pages, you’ll need to add our back in stock alerts button code.

Step 3: Add the button to the collections liquid file that renders the collections grid as a snippet.

  <!--   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: It’s best to include it at the product-grid level, which will automatically include it on every product in the collections

Step 3 – Create a file called ‘swym-custom.liquid’ in the snippets file and add the following code

<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 5: Include the file right below the swymSnippet in the theme.liquid file

{% include 'swym-custom'%}

Optional CSS to include an 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, to avoid disruption to your users, disable the Swym Back In Stock Alerts app (Shopify Apps > Back In Stock Alerts > Disable App)

Next, create a support ticket via Swym Admin with any helpful info and we’ll follow up with you to get you set up.