Add a Back in Stock button to the Collection page

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

The process for adding this is very similar to adding the button the product page. The key difference is to ensure you include a data-product-data attribute for the link.

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

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 }}'>
    Email when available
  </a>
{% endunless %}

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 }}'> 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 }}'>
    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/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.

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  support@backinstock.org. 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.

Still need help? Contact Us Contact Us