TABLE OF CONTENTS

What are Back in Stock notifications?

When a shopper visits the store and sees that a product is out of stock, they can use the Back in stock notifications feature to request to be notified when the products are available again. These notifications provide a chance to reclaim lost sales by alerting interested shoppers and guiding them toward a purchase.


Enabling Back in Stock notifications from your Freshmarketer account is a two-step process:

  1. Setting up the “Notify Me” form on your Shopify store
  2. Automating notifications via Journey

Step 1: Setting up the “Notify Me” form

  • Go to Admin Settings > "Notify Me" form
  • Enable the “Notify me” toggle to add Notify Me buttons on your Shopify web pages for out of stock products.
Note: Once this toggle is enabled, you will also have to enable the Back in Stock Journey to send notifications to customers once your products are back in stock.
  • Next, customize the Notify button displayed on your web pages. Provide the button label and color based on your preferences.
  • Then, customize the content of your notifications, and save your changes.


Step 2: Automating notifications via Journeys

  • Enable the Back in Stock Journey from Journey Playbooks.
  • Alternatively, you can also create a Journey from scratch. Drag and drop the trigger “On Shopify event” and select the event “Back in Stock.”
  • Add the condition “Wait for Shopify event” and choose the product to be restocked.
  • Next, select the email campaign. Create an email to send Back in Stock notifications. 
  • Read more about Back in Stock journey email in this article.
  • Provide the necessary details, configure discount codes(if any), and choose the required formatting options for your email.
  • You can also configure your Journey to send WhatsApp and SMS messages. Edit the placeholder type as Shopify events, select event as Notify me, and select the placeholder.
  • Next, start your Journey. You can view the Journey metrics under the Analytics tab for more insights.


Adding the Back in Stock notifications code to your Shopify theme


  1. Go to your current theme on the admin settings page, click on three dots, and then click on Edit code. 
  2. Then go to Sections->main-product.liquid file and add the below script at the bottom of the file:
    <script src='https://d1j4g1psln7gl5.cloudfront.net/BackInStockUpdates.js' id='fm-out-of-stock-notification-script' defer></script>


Check for the following dependencies:

  1. Check if the "main-product.liquid" is present in your Shopify website code.

  2. If you cannot find the file, you need to create the required DOM elements for the product page and add the script file to the product page.

  3. Product object value (Shopify provides this) should be available on the product page. If the product object is unavailable, you need to set up a global variable with the product name using the same properties provided by Shopify. 


For more details, please visit  https://shopify.dev/docs/api/liquid/objects/product.


Resolving issues related to the “Notify Me” button placement


If the script is not working because the dependent DOM elements are not present (Usually, DOM elements are available in the "main-product.liquid" file given by Shopify), then try these steps: 


  1. Wrap the sold out button with a div element with the product form class name. 

  2. The notify button will get inserted after this product-form wrapper element.

  3. Add the “product-form__submit” class to sold out button.

  4. Wrap the variants in a tag called fieldset. 

  5. Depending on the types of variants you have in your store, you can create fieldset tags and wrap the variants inside that. 

  6. The variants need to be of Input type - radio.


For example: Let's say there are color and size variants. Two fieldset tags would be created, one for wrapping color variants and the other for size variants. Inside color variants, there would be input type radio elements for color options. The same goes for size.


Code example for sold out button wrapper:


<product-form class="product-form">

  <div class="product-form__buttons">

    <button class="product-form__submit">Sold out</button>

  </div>

</product-form>


Code example for variants:


<variant>

  <fieldset>

    <input type="radio" name="Size" value="30" checked>

    <input type="radio" name="Size" value="32" >

  </fieldset>

  <fieldset>

    <input type="radio" name="Color" value="Black" checked>

    <input type="radio" name="Size" value="White" >

  </fieldset>

</variant>