Back in Stock: Product Page Button Setup

This comprehensive guide covers all button types for product pages, from simple no-code solutions to advanced developer customizations.

Button Types Overview

Back in Stock supports multiple button types for product pages, each serving different needs and technical requirements:

Automatic Buttons (Recommended for Most Users)

  • App Block Button: Added via Shopify theme editor - no coding required
  • Inline Button: Generated automatically by our app script - works with most themes

Custom Buttons (Advanced Users & Developers)

  • Custom Product Page Button: Full control for developers and advanced users
  • Custom Widget Button: Upload your own button image

🚀 Quick Setup (Most Users)

Option 1: App Block Button (No coding required)

Setup Process:

  1. Open Shopify Theme Editor
    • Go to Online Store → Themes → Customize

    • Navigate to a sold-out product page

      Add the Button Block

    • Click "Add block"
    • Select "Back in Stock button" under Apps section

    • Position where you want it to appear

      Customize (Optional)

    • Click the "Back in Stock button" block
    • Adjust text, colors, and styling within the theme editor
    • Click Save

Option 2: Automatic Inline Button (Works with most themes)

Setup Process:

  1. Enable in Dashboard
    • Go to Product page button settings
    • Ensure inline button is enabled

    • Choose your positioning (below sold out button, etc.)

      Test on Store

    • Visit a sold-out product page
    • Button should appear automatically when variants are unavailable

⚠️ Button not showing? Contact our support team at backinstock-support@useamp.com - we'll set it up for you within 24 hours.

🎨 Custom Button Options

Custom Widget Button (Upload your own design)

Best for: Merchants who want to match their exact brand styling

Setup Process:

  1. Create Your Button Image
    • Design in PNG, GIF, or JPEG format
    • Any dimensions (we auto-detect size)

    • Match your store's visual style

      Upload to Theme

    • In Shopify admin: Online Store → Themes → Actions → Edit code

    • Upload your image file to Assets folder

      Select in Settings

    • Visit widget settings
    • Choose your uploaded image from "Button image" dropdown
    • Save changes

💻 Custom Product Page Button (Developer Level)

⚠️ Developer Required: This option requires HTML/JavaScript knowledge and is intended for developers & advanced users. If you want a standard button to appear on your product page, we create theme integrations on demand - contact us at support@backinstock.org.

Why Use Custom Buttons?

Advantages of custom implementation:

  • Full control over button presentation and brand matching
  • Faster loading - Shopify loads app JavaScript after all other content, so custom buttons can appear faster than the default widget
  • Custom layouts - Integrate with specific requirements, like showing variants in lists with multiple 'notify me' links per row
  • Advanced scenarios - Meet unique design or functional requirements

Basic Implementation

Any HTML element, including <button> or <a> , can trigger the signup form by including the attribute id="BIS_trigger" .

Simplest implementation:

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

As a link:

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

Specify Default Variant

You can specify which variant is the default selection in the signup form by including a data-variant-id attribute:

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

Where 12345678 is replaced with an actual variant ID.

Single Variant Products

Simplest Approach

If your product catalog only includes single variant products, use simple Liquid templating logic to show the button only when the product is sold out:

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

Recommended Approach

If your catalog includes multi-variant products (e.g., 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, include the button in the template and hide it unless a sold out variant is selected:

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

Multi-Variant Products with JavaScript

Use JavaScript to show the button when a customer selects a sold out variant. This depends on your theme's implementation:

Important Notes:

  • The following code is an example to demonstrate the concept
  • Include this code at the bottom of your 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
  }
}

🔧 Advanced Scenarios & Solutions

Hide Button with Product Tags

The default JavaScript Back in Stock widget can be hidden by adding a tag (usually bis-hidden ) to a product. When using custom buttons, this functionality must be added manually:

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

How to use:

  • Add tag bis-hidden to products in Shopify admin
  • Button won't appear on tagged products

Layouts with Swatches

Some themes use 'swatches' to display variant options and disable unavailable options, preventing customers from selecting sold out variants. Since customers can't select a sold out variant, the toggle code above won't work.

Solution: Set up a secondary call-to-action that appears when any variant is sold out:

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

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

Note: This solution can often be configured by Back in Stock support without editing your product template. Contact us to learn more.

Layouts with Variants in Lists

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

{% for variant in product.variants %}
  {% if variant.available == false %}
    <button id="BIS_trigger" data-variant-id="{{ variant.id }}">
      Notify me - {{ variant.title }}
    </button>
  {% endif %}
{% endfor %}

⚙️ Configuration Settings

Button Behavior

Control when buttons appear:

  1. Visit Settings
    • Go to Customize → Product page button

    • Click "Behavior" tab

      Configure Options:

    • ✅ Hide when inventory not tracked: Button won't show for products not tracking inventory
    • ✅ Auto-hide on restock: Button disappears when product restocks
    • ✅ Respect product tags: Honor bis-hidden tags
  2. Save Settings

Button Positioning

Floating Button: Appears in screen corners

  • Controlled under: Campaigns → Product page button
  • Choose corner position and styling

Inline Button: Embedded in product page

  • Usually appears below "Sold Out" button
  • Matches your page layout automatically

🔗 Related Resources

Collection Pages

You can add a button to a collection or landing page, but the code requirements are slightly different. See our Collection Page Button Guide.

Custom Signup Forms

For building completely custom signup forms, refer to our JavaScript API documentation.

WordPress Sites

We currently only support Back in Stock on Shopify store pages. We're looking to add support for WordPress sites using the Shopify Buy Button. If you're interested, contact us.

🔍 Troubleshooting

Button Not Appearing

Check these first:

  • Product is actually sold out (all variants unavailable)
  • App embed is enabled in theme editor
  • No conflicting bis-hidden product tags
  • Custom code is properly implemented

Get help:

Button Showing When It Shouldn't

  • Check behavior settings are configured correctly
  • Verify product inventory status in Shopify
  • Review any custom code modifications
  • Verify Liquid template logic for availability checks

JavaScript Issues

  • Verify selectCallback() function exists in your theme
  • Check browser console for JavaScript errors
  • Ensure jQuery is loaded if using jQuery-based examples
  • Test variant selection functionality

📋 Supported Button Types Summary

Button Type Coding Required Customization Level Best For
App Block None Basic Most merchants
Inline (Auto) None Limited Quick setup
Custom Widget Basic Medium Brand matching
Custom Product Advanced Full Developers

🚨 Important Notes

  • Developer expertise required for custom product page buttons
  • Theme compatibility varies - contact support if buttons don't appear
  • Test thoroughly across different devices and browsers
  • Backup your theme before making custom code changes
  • Document your customizations for future reference

Need custom implementation help? Our support team can create theme integrations on demand. Contact us at backinstock-support@useamp.com with your requirements.

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

Still need help? Contact Us Contact Us