How to Set up Back in Stock Notifications for Shopify

Set up back in stock notifications for your Shopify store to send Contacts email when your products are back in stock! It's as easy as creating two Automations and pasting a snippet into your Shopify store's theme.

🚦 Before Getting Started

Set up your Shopify integration
Install Beacon general tracking

1

Create a Subscribed to Back in Stock Automation

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 Shopify 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 confirms Contacts' subscription to notifications

To display the name of the product variant that is back in stock, use the {{ trigger.getProductName() }} tag in any text block.
To create a clickable button that takes Contacts to the product, use {{ trigger.getProductUrl() }} in the button's URL field.

To display an image of the product, add an HTML block with the following snippet (change the image alt text to something descriptive)

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td align="center">
		<div style="margin:0 auto;text-align:center">
			<img style="max-width:100%;border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%" src="{{ trigger.getProductImageUrl() }}" alt="product-variant-image"/>
            	</div>
		</td>
	</tr>
</table>

Use the preview button to see how your email will look populated with product data! Email previews will pull generic data from your store. When you see product names, tags, and links populate correctly in your preview you can be sure your setup is correct!

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 Shopify store’s styling if you are using a Shopify theme. If you are using a custom theme, 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: "shopify",
    },
    settings: {
        cta_button: {
            text: "Notify me when available",
            product_page_form_element_selector: ".product-form",
        },
        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><br>

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

To install the script:

Log in to your Shopify account
Click Online Store
Click Themes
Click the Three dot menu
Click Edit code
Paste the snippet just before the </body> tag

4

Turn on the Back in Stock Automation

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.

Replace the PUBLIC_TOKEN in the script below with the token in your Shopify integration's settings

<script src="https://sendlane.com/scripts/sendlane-backinstock-widget.lib.js"></script>
<script>
SendlaneBackInStock.configure({
    account: {
        token: "PUBLIC_TOKEN",
        platform: "shopify",
    },
    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",
            product_page_form_element_selector: ".product-form",
	    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')
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)

Additional Resources

Introducing Sendlane’s Back-in-Stock Notifications
Learn the ins and outs of marketing automation from experts at eCommerce Academy
6 Ways to Improve Your eCommerce Emails