How to set up back in stock notifications for BigCommerce

Overview

Back-in-stock notifications for your BigCommerce store enable you to set up automations to send contacts emails when your products are back in stock. Read on to learn how to create the two automations needed for back-in-stock notifications and install the script that powers the notifications.

In this guide

Create a subscribed to back in stock notifications automation
Create a product back-in-stock automation
Install the back in stock script
Activate automations
Style options

🚦 Before Getting Started

Set up your BigCommerce integration

1: This automation will send an email to contacts confirming their subscription to back in stock notifications.

Create an automation using the Subscribed to Back in Stock trigger. Add an email node with a message that confirms contacts' subscription to notifications.

2

Create a product back-in-stock automation

This automation will send an email to contacts when the product they are interested in is back in stock!

Create an automation and select the Product Back in Stock trigger from the BigCommerce tab. In the Units field, enter the number of units that should be in stock before the automation sends out back in stock notifications.

Add an email node with a message that informs contacts that the product they want is back in stock! Use the In Stock block to display the product's photo, price, reviews (if Sendlane Reviews is installed), and a link to purchase:

Add a Goal node that checks for purchases, and your finished automation should look something like this:

3

Install the back-in-stock script

The script below will automatically pull your BigCommerce store’s styling. Check out the Style Options section below for a script that provides more granular control!

<script src="https://sendlane.com/scripts/sendlane-backinstock-widget.lib.js"></script>
<script>
SendlaneBackInStock.configure({
    account: {
        token: "PUBLIC_TOKEN",
        platform: "bigcommerce",
    },
    settings: {
        cta_button: {
            text: "Notify me when available",
        },
        modal: {
            headline: "Get notified when this product is back in stock.",
            email_field_label: "Email",
            button_label: "Notify me when available",
            success_message: "We will notify you when it becomes available",
    	    disable_phone_field: true,
        }
    }
})
</script>

Before logging into BigCommerce and adding the script, you must add your BigCommerce integration token to the script.

To copy your BigCommerce integration token:

Click the gear icon
Click the copy icon next to the integration token

Copy the script to a text editor, then replace the PUBLIC_TOKEN with the token in your BigCommerce integration's settings.

Add the script to your BigCommerce store:

Click Storefront
Click Script Manager
Click Create a Script
Enter a descriptive name
Optional: add a description
Set Location on page set to Footer
Set Select pages where script will be added to Store pages
Set Script Category to Essential
Change the Script Type to Script
Paste the above script in the Script contents field
Click Save

Your script is now live!

4

Activate automations

Now that your script is successfully installed, all that's left to do is activate your automations!

To activate an automation, go to the automations page and click the Play icon next to the automation you want to activate:

Style options

The following script provides more granular control over the appearance and settings for the back-in-stock notification form and button appearing on product pages when a product is out of stock. This script can be used in place of the simplified script in step 3.

Before logging into BigCommerce, you'll need to add your BigCommerce integration token to the script. Copy the script to a text editor, then replace the PUBLIC_TOKEN with the token in your BigCommerce integration's settings

<script src="https://sendlane.com/scripts/sendlane-backinstock-widget.lib.js"></script>
<script>
SendlaneBackInStock.configure({
    account: {
        token: "PUBLIC_TOKEN",
        platform: "bigcommerce",
    },
    settings: {
        cta_button: {
            text: "Notify me when available",
            background_color: "black",
            text_color: "white",
            margin: "0.5rem 0",
            padding: "10px",
            width: "100%",
            product_page_button_class: "btn",
	    font_family: "Arial"
        },
        modal: {
            headline: "Get notified when this product is back in stock.",
            email_field_label: "Email",
            button_label: "Notify me when available",
            success_message: "We will notify you when it becomes available",
            drop_background_color: "rgba(0,0,0,0.4)",
            background_color: "#fff",
            text_color: "#222",
	    font_family: "Arial",
	    disable_phone_field: true,
            button_text_color: "#ffffff",
            button_background_color: "#006fbb",
            close_button_color: "#ccc",
            error_background_color: "#fcd6d7",
            error_text_color: "#c72e2f",
            success_background_color: "#d3efcd",
            success_text_color: "#1B9500"
        }
    }
})
</script>

Button Settings

settings.trigger.text - Text displayed on button when an item goes out of stock.
settings.trigger.background_color - Button background color
settings.trigger.text_color - The text color of the button
settings.trigger.margin - Margin around the button (defaults to '0.5rem 0' or 8px)
settings.trigger.padding - Padding around the button
settings.trigger.width - Override of the button width (defaults to 100%)
settings.trigger.product_page_use_button_classes - Enabling this feature will attempt to use existing buttons' width in the product form element on the product page. While enabled, the settings.trigger.product_page_button_class will be ignored.
settings.trigger.product_page_form_element_selector - Enabling this feature overrides the widget's location for the back in stock notification button on the page (defaults to .product-form)

Subscription Form Settings

settings.modal.headline - Headline that appears at the top of the form; (defaults to product name)
settings.modal.email_field_label - Email field label (defaults to 'Email')
settings.modal.button_label - Text within the submit button (defaults to 'Notify me when available')
settings.modal.success_message - Message that appears when form is submitted (defaults to '"You're in! We'll let you know when it's back"')
settings.modal.drop_background_color - Drop background color that appears when the form is open (defaults to 'rgba(0,0,0,0.4)')
settings.modal.background_color - Background color of the form (defaults to white)
settings.modal.text_color - Text color of the popup form (defaults to black)
settings.modal.button_text_color - Text color of the button on the popup form (defaults to white)
settings.modal.button_background_color - Background color of the button on the popup form (defaults to black)
settings.modal.close_button_color - Color of the "X" button that closes the form (defaults to #ccc)
settings.modal.error_background_color - Background color of the form's error notification (defaults to pale red)
settings.modal.error_text_color - Text color of the form's error notification (defaults to red)
settings.modal.success_background_color - Background color of the form's success notification (defaults to pale green)
settings.modal.success_text_color - Text color of the form's error notification (defaults to green)