Hide or show the button for specific products

This documentation is designed for custom added buttons and solutions - If you are using one of our Theme Integrations you can hide the button using a pre-built in tag. See: Can I hide the back in stock button for certain products?

By specifying a custom configuration in the product template you can override the Back in Stock settings for a specific product or collection. Currently the button `visible` state is the only configuration supported for overriding.

To override the Back in Stock configuration add a   _BISConfig  JavaScript object to the product page. The properties of this object will override the default app configuration.

 _BISConfig = { button: { visible: false } };

Example: Hide the widget button for a specific collection

In this example we have a product collection called   Clearance which contains products that won't be restocked. We want to prevent the Back in Stock button appearing for these products.

Note: if you only have a few products to hide the button for you may find it easier to hide the button by using the bis-hidden tag.

The easiest way to do this is to set a configuration property in your   product.liquid  template. Use a Liquid if block to only include this configuration for products in the Clearance collection:

{% for collection in product.collections %}    
  {% if collection.handle == 'clearance' %}       
    <script>        
      var _BISConfig = _BISConfig || {}; 
      _BISConfig.button = { visible: false };       
    </script>    
   {% endif %} 
{% endfor %}

Example: Show the button for tagged products

The previous example illustrated how to hide the button for certain products. This example looks at the opposite scenario: having the button hidden by default, and then show for specific products. 

The setup below assumes the button is off for all products except that those with the tag 'BIS'. While we use a tag in this example the same approach would work for products with in a certain collection or other attribute you can identify with Liquid.

First, switch off the Back in Stock product page button in your account settings:

1. Open up  https://app.backinstock.org/widget/edit

2. Uncheck 'Widget button is visible on product pages'

3. Hit Save.

The button is now off for all products.

You can now add the Liquid code to override this setting for selected products.

In your Shopify admin:

1. Open the HTML/CSS editor for you theme.

2. Open the product.liquid template

3. Add the following code (it can be added anywhere, but the bottom of the page is probably easiest):

{% if product.tags contains 'BIS' %}
  <script>
    var _BISConfig = _BISConfig || {};
    _BISConfig.button = { visible: true }; </script> 
{% endif %}

4. Hit Save.

The button will now only appear for products with the tag 'BIS'.