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:
    <scriptsrc='https://d1ggrngj0uwslm.cloudfront.net/fm_adhoc_scripts/back_in_stock.js' id='fm-out-of-stock-notification-script' defer></script>


Check for the following dependencies:

  1. Check if the "main-product.liquid" is available 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.


What to do if you face issues with the “Notify Me” button placement?


If the script is not working because the dependent DOM elements are not there, find the file where the sold out button element is present. Usually the element is available in the main-product.liquid file. Troubleshoot for the following:


  1. Sold out button wrapper element 


Check if “product-form” class name is present in the sold out button wrapper element. If it is already available, then you do not need to add anything. If it is not present, then add "product-form fm-product-buttons" in the sold out wrapper element.

  1. Sold out button


Check if “product-form__submit” class name is already present in the sold out button element. If it is already present you do not need to add anything. If it is not present, add "product-form__submit fm-sold-out" class name in sold out button element.

  1. Variant wrapper element


Check if the variant wrapper element is of type fieldset. If it is so, you do not need to add anything. If it is not, then add "fm-variant-parent-element" class name to the wrapper element.

  1. Variant radio button element


Check if the input element of type radio is present for the variant radio element. If it is already present, you do not need to add anything. If it is not, then add "fm-variant-type-option" class name to the variant radio button element and, when the variant element is selected,  add "is--selected" class name to the radio element.

Code Example for sold out button for adding custom class:

<div class="product-form fm-product-buttons">

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

 </div>


Code Example for variant element for adding custom class:

<div class=”fm-variant-parent-element>

<div class= “fm-variant-type-option is–selected”>Red</div>

<div class= “fm-variant-type-option”>Red</div>

<div class= “fm-variant-type-option”>Red</div>

</div>


How to disable Back in Stock notifications?


Go to Admin settings > “Notify me” Form. Go to Back in Stock notifications and click on “Disable notifications”


Note: Disabling notifications will remove the “Notify me” form and disable all the automated Back in Stock journeys you have set up on your CRM.


If you face any problems while enabling or disabling the Back in stock notifications on your website, please reach out to crm-support@freshworks.com