Add a Back in Stock button to the Collection page

The instructions in this page also work for search pages, home page and any other page with multiple products. 

To provide your customers with faster access to registering a Back in Stock notification you can include a button or link in your collection or search page for each sold out product.

The process for adding this type of button is very similar with adding a custom button to the product page. The key difference is to ensure you include a data-product-data  attribute for the link, and have the BIS_trigger  class attribute (instead of the ID attribute).

<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
  Email when available
</a>

The button works even if it is inserted or changed later via JavaScript. Back in Stock does not attach the click event directly to the buttons. Instead, it verifies at the time of the click if the target element has the BIS_trigger  class. That allows the user to create the button dynamically or change the data-product-data  after loading the page. The popup will show the product that is currently set in that attribute at the moment of the click.

To only show the link when a product is sold out you can use a Liquid unless statement (the opposite of if ):

{% unless product.available %}
  <a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

The code above adds all product and variant parameters in data-product-data attribute. If you want to include only the data needed for Back in Stock instead, make sure to include the following parameters:

• id
• handle
• available
• tags
• variants

• id
• available
• title
• inventory_quantity
• inventory_management

<a href='#' class='BIS_trigger' data-product-data='{"id":118958653449,"handle":"hamm2","tags":[],"available":false,"variants":[{"id":1556361314313,"title":"Small","available":false,"inventory_quantity":0,"inventory_management":"shopify"},{"id":1556361347081,"title":"Large","available":false,"inventory_quantity":0,"inventory_management":"shopify"}]}'><br>  Email when available
</a><br>

Specifying a variant

If you include product variants for each product in your collection page you may want multiple links, one for each variant. You can specify the variant by including a data-variant-id attribute:

<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}" data-variant-id="1234">
    Email when available
</a>

1234 should be replaced with the id of the variant (eg. variant.id )

Styling the link

Each theme and store is different, so Back in Stock won’t add any styling to the link. You can style the link yourself by inserting some CSS in your style sheet. For example, to make the link red, underline and bold:

/* This is added to a stylesheet in the Assets folder */
.BIS_trigger {
  color: red;
  text-decoration: underline;
  font-weight: bold;
}

You can also reuse an existing class (remember, HTML allows you to have multiple names in the class attribute). A lot of themes use btn for buttons, so you can try adding that to get a more button-y look for your link.

{% unless product.available %}
  <a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

Troubleshooting

If you've added a link but it's not working try the following checks:

1. Make sure your account is using the latest version of the product page widget.

   Visit  https://app.backinstock.org/bis/widget/edit and check for any notices allowing you to update to the latest version.

2. Check your product data is included on the link.

   The popup form expects the data-product-data attribute to include a JSON object for the product. Make sure to use single quotes (') not double quotes (") around the JSON data. Double quotes are used in the JSON object itself and cause encoding issues.

3. Make sure the link doesn't contain other visible elements.Back in Stock widget expects that the element clicked has the BIS_trigger class. If a nested element (inside the link) is the target of the click event, the popup will not show. To fix this, consider adding the BIS_trigger and data-product-data attribute to the children instead.

Using data-product-handle

Previous versions of the storefront widget supported specifying a product handle attribute ( data-product-handle) instead of embedding a JSON object. This functionality is still supported on accounts created before December 15 2016.

Problems or questions? Just stuck?

If you have any problems or questions, or want to provide feedback on this guide, please get in touch by email at  [email protected]. Drop us a line if you’re stuck on where to add the link, too, and we’ll do our best to get you setup.