Using a custom product page button

This article is intended for Developers & advanced users - If you want a button to appear on your product page, we create theme integrations on demand, get in touch with us on [email protected].

The standard Back in Stock installation uses JavaScript to add a button to the product page. For some stores you might prefer to add a custom button or link to the product page. Customers can click this button to trigger the Back in Stock signup form.

The advantages of using a custom button include:

  • Full control over the presentation of the button and match it to your brand
  • Shopify loads app JavaScript after all other content so a custom button can appear faster than the default Back in Stock widget
  • You can integrate with a a custom layout or meet specific requirements. For instance, you show variants in a list and want a ‘notify me’ link on multiple rows.

This document covers adding a custom button to a Shopify product page. For details on adding a button to a collection or landing page please see Add a Back in Stock button to the Collection page

Creating a custom button or link

Any element, including <button> or <a> can be used by including the attribute id="BIS_trigger" .

The simplest implementation of this would be:

<button id="BIS_trigger" type="button">Notify me</button>

A link works just as well.

<a href="#" id="BIS_trigger">Notify me when restocked</a>

You can specify which variant is the default selection in the sign up form by including a data-variant-id attribute on the link or button.

<a href="#" id="BIS_trigger" data-variant-id="12345678">Notify me when restocked</a>

where 12345678 is replaced with an actual variant id.

Showing a custom link for single variant products (simplest)

For the majority of layouts you will only want the button to appear when the customer selects a sold out item.

If your product catalog only includes single variant products you can use some simple Liquid templating logic to only include the button when the product is sold out.

{% if product.available == false %}
  <button id="BIS_trigger" type="button">Notify me</button>
{% endif %}

Showing a custom link for single variant products (recommended)

If your catalog includes multi-variant products (for example, a product with size Small and Large) relying on product.available is suboptimal: the button won’t appear unless all variants are sold out.

Instead the recommended solution is to include the button in the template and hide it unless a sold out variant is selected.

This example demonstrates including a button but hiding it unless the product is completely sold out:

<button id="BIS_trigger" type="button" {% if product.available %} style="display: none;" {% endif %}>
    Notify me
</button>

Next, we use JavaScript to show the button when a customer selects a sold out variant. How exactly to do this will depend on your theme. Many themes use a JavaScript function called selectCallback() which is called when a customer changes variants. Your theme may have this function, or may use a different approach.

Please note

  • The following code is an example to demonstrate how to show the link. We include our code at the bottom of the existing selectCallback() function. It won’t work if you simply paste it into your template.
  • We use jQuery to keep the code example short.
selectCallback = function(variant) { 
  // your existing selectCallback function code here...
  
  if (variant && variant.available) {
    $('#BIS_trigger').hide(); // hide the button
  } else {
    $('#BIS_trigger').show().attr('data-variant-id', variant.id); // show the button and set the default variant
  }
}

Solutions for common scenarios

Hiding the button with a product tag

The default, JavaScript Back in Stock widget includes the ability to be be hidden by adding a tag - usually bis-hidden - to a product. This is a simple and flexible workflow store staff members can use to hide Back in Stock for certain products.

When setting up a custom button this functionality will no longer included automatically. You can support similar functionality with some simple Liquid template code:

{% comment %}Exclude link if the product is tagged bis-hidden{% endcomment %}

{% unless product.tags contains 'bis-hidden' %}
  <button id="BIS_trigger" type="button" {% if product.available %} style="display: none" {% endif %}>
    Notify me
  </button>
{% endunless %}

Layouts with ‘swatches’

Some themes use ‘swatches’ to display variant options. These often disable unavailable options and prevent customers from selecting sold out variant. Since customers can’t click to select a sold out variant the code discussed above to toggle the custom link won’t work.

For these types of layouts we recommend setting up a link in product page as a secondary call to action. It can appear after the ‘Add to cart’ button and only appears if at least one variant is sold out.

This can be setup with some simple Liquid template code:

{% assign has_sold_out_variants = false %}
{% for variant in product.variants %}
    {% if variant.available == false %}
        {% assign has_sold_out_varians = true %}
    {% endif %}
{% endfor %}

{% if has_sold_out_variants %}
    <a href="#" id="BIS_trigger">Can't find your size?</a>
{% endif %}

This solution can often be configured by Back in Stock support without the need to edit your product template. Please get in touch to find our more.

Layouts with variants in lists or order forms

When product page layouts display variants in a list you might like to include a link for each sold out variant. Include the data-variant-id on the element to ensure the correct variant is selected for the customer.

Adding a button to a collection or landing page

You can add a button to a collection or landing page but the code requirements are slightly different. Please see Add a Back in Stock button to the Collection page.

Custom signup forms

Refer to the Back in Stock JavaScript API article for information in how to build a custom sign up form.

Wordpress sites

We currently can only support using Back in Stock on Shopify stores pages. We are looking to add support for Wordpress sites using the Shopify Buy Button. If you’re interested in doing this please get in touch.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.