How to set up back in stock notifications for Shopify

Overview

Set up back in stock notifications for your Shopify store to send Contacts email when your products are back in stock! Read on to learn how to install the back in stock button and set up related automations.

In this guide

  1. Create a subscribed to back in stock automation
  2. Create a product back in stock automation
  3. Install the back in stock script
  4. Turn on back in stock automations
  5. Troubleshooting

🚦 Before Getting Started

  1.  Set up your Shopify integration
  2.  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 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:

https://s3.amazonaws.com/helpscout.net/docs/assets/5cd30c272c7d3a177d6e82b7/images/63d01e1c7eb7a63c30e3f2a8/file-XM4bVEziDM.png

3

 Install the back in stock script

The script below will attempt to automatically pull your Shopify store’s styling if you are using a standard Shopify theme. If your button doesn't look like the rest of your store after installation, check out the Style Options section below for a script that provides more granular control of your button's design, and review the Troubleshooting section to see specific suggestions for known design fixes. 

<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>

Before logging into Shopify, add your Shopify integration token to the script so it's ready to paste in your store. 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:

  1. Log in to your Shopify account
  2. Click  Online Store
  3. Click Themes
  4. Click the Three dot menu
  5. Click Edit code
  6. Search for the theme.liquid file
  7. Click into the theme.liquid file
  8. Press CMD + F to open the search function
  9. Type </body> in the search field
  10. Paste the snippet just before the </body> tag

4

 Turn on back in stock automations

Now that your script is successfully installed, it's time to activate your automations!

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 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, 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)

Troubleshooting

The notify me button doesn't appear on my site!

Because of the variability in Shopify themes, there are several potential solutions when your back in stock notification button is not appearing on your site:

You may have multiple classes in your product_page_button_class value due to conflicting scripts, apps, or themes. Check for anything in your store that may be modifying the btn class, such as:

  1. Theme CSS rules or JavaScript code targeting buttons with the class btn 
  2. Apps that modify product pages or buttons  

If your product_page_button_class value isn't using multiple classes, your Shopify theme might not access required product IDs when product pages are rendered. Before continuing, ensure the back in stock script is installed:

  1. Right click anywhere on your store
  2. Click Inspect
  3. Press CTRL + F
  4. Paste sendlane-backinstock-cta-button

If you find a button with an ID that equals sendlane-backinstock-cta-button, the back in stock script has been successfully installed.

Now you can check for undefined product IDs in your product pages. Open your browser's console (we highly recommend Chrome) and type the following into the console (copy and paste is not available in the console): document.querySelector('.product-variant-id')?.value. If you get a result of undefined, you need to paste the following snippet just after the closing </script> tag of your back in stock script. This snippet provides the necessary product ID.

<input
  type="hidden"
  name="id"
  value="{{ product.selected_or_first_available_variant.id }}"
  disabled
  class="product-variant-id"
>

Back to troubleshooting

The notify me button doesn't match my theme!

If the standard back in stock script cannot automatically apply your store's theme to the notify me button, you can add the product_page_button_class: "btn", setting to the script with your theme's specific button class. The adjusted standard script will look something like this (note the addition of product_page_button_class: "btn", in 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",
            product_page_form_element_selector: ".product-form",
	    product_page_button_class: "btn",
        },
        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>

btn and button are common generic button classes. If using the script above with the class set to btn doesn't work, try changing btn to button.

If neither btn or button work, you'll need to use Chrome's inspect tool to find the button class your theme is using. If you haven't used the Chrome inspect tool before, check out this video on using the inspect tool to find the correct place to install the star rating widget for Sendlane Reviews. Use the technique shown in the video to highlight and identify the class associated with buttons in your store.

You should see <div> tags related to buttons with a button class specified, like this:

In this specific instance, you'd replace the btn in the modified script above with shopify-payment-button. The class in your theme may be something else.

Replace the button classes in the script with those in your theme until the back in stock notification button matches your theme.

Back to troubleshooting

The notify me button is showing up in an odd place!

The basic back in stock script uses the product_page_form_element_selector: ".product-form", setting to determine where the back in stock button appears. Most Shopify themes use the class .product-form for the area of the product page where the variant and add to cart buttons are.

If your back in stock button appears somewhere odd on your product page, your theme either uses a class other than .product-form for its product page selection buttons or does not have a class. You can fix this by changing the product_page_form_element_selector: ".product-form", setting from .product-form to your theme's class. Some common alternate classes are .product-single__form and js-product-form.

The adjusted standard script will look something like this (note the change of .product-form to .product-single__form in the product_page_form_element_selector line):

<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-single__form",
	    product_page_button_class: "btn",
        },
        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>

If neither .product-single__form or js-product-form work to place your button beneath the add to cart button, you'll need to use Chrome's inspect tool to determine the correct class for your theme. Note that the correct class will be unique, appearing only once in your product page's theme file.

You should see  <div> tags related to product information with a class specified, like this:

In this specific instance, you'd replace the btn in the modified script above with shopify-payment-button.

Replace the button class in the script with button classes found in your theme until the back in stock notification button matches your theme. The class in your theme may be something else.

Back to troubleshooting

Additional Resources

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