How to Enable Back in Stock Alert Buttons in QuickView

Once you’ve installed Back in Stock Alerts, the back in stock alert subscription button is added to your product pages by default. If you have QuickView enabled on your site we strongly recommend that you enable alert subscriptions there also to maximize the number of subscriptions you collect.

Note: This feature does not enable a QuickView modal for your store. This will only add our back in stock alert subscription buttons to your existing QuickView pop-up.

How to Enable Back in Stock Alert Subscription Buttons in QuickView

Step 1: Add button code to the QuickView modal (pop-up)

Open the theme file that you wish to edit in Shopify Admin by clicking on Actions > Edit code

Look for the file that renders the QuickView pop-up. In most cases, this will be the Snippets/product-template.liquid file. The file name can vary depending on your theme. If you’re unsure about which file to edit, please contact your theme developer for help.

Next add the button code:

<!--   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 %}

Step 2: Add the back in stock functionality to the button

Add a new Snippet in your theme, “swym-custom”. This file will contain all the JavaScript code mentioned in this step. 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 3 (Optional): Style the back in stock alerts button

Find your theme’s CSS file. Common file names are:

• theme.css
• theme.scss
• styles.css
• Styles.scss

Add the following code to the end of the file:

.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;
}

Step 4: Include the new snippet in your theme.liquid file

Open the Layout/theme.liquid file.

Add the following line, right below {% include ‘swymSnippet’ %}:

{% include 'swym-custom' %}

It should look like this:

Save all the changes, and verify that:

1. the button appears when QuickView is opened for different products
2. the button can be clicked and is working as expected
3. the button state changes when different variants are selected, and that the action occurs for the right variant

If run into any issues, please contact us at support@swymcorp.com.

Frequently Asked Questions

I’ve enabled the Back in Stock alert subscription button, but it shows up as a square

Please follow the optional Step 3 above to style the button.

How do I change the look of the button?

You can use CSS to change the look of the button. Add the CSS to your theme’s CSS/SCSS file.

The button appears correctly, but it takes me to the product page

First, check if the button’s z-index is below the product tile. Next, make sure the button code is not placed inside the <a> tag for the product.