TABLE OF CONTENTS

• What are back-in-stock notifications?
• Step 1: Setting up the “Notify Me” form
• Step 2: Automating notifications via Journeys
• What to do if you face issues with the “Notify Me” button placement?
• Manual script injection to the current theme of the Shopify store

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 https://youraccounturl.myfreshworks.com/crm/marketer/mas/#/settings/configure-notifyme. Replace "youraccounturl" in the above link with your freshworks account url.
• Enable the “Notify me” toggle to add Notify Me buttons on your Shopify web pages for products that are out of stock.

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

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 present(Usually DOM elements are present in the main-product.liquid file given by Shopify), then perform the following steps: 

1. Wrap the sold out button with a div element with the product form class name. The notify button will get inserted after this product-form wrapper element.

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

3. Wrap the variants in a tag called fieldset. Depending on the types of variants you have in your store, you can create fieldset tags and wrap the variants inside that. The variants need to be of input type radio.

4. For example: Suppose 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>

For manual script injection to the current theme of the Shopify store:

Go to the current theme on the admin settings page, click on three dots, and then click on Edit code. 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>

Dependencies that must be present in the Shopify store:

1. main-product.liquid file must be present. If this file is not present then the user needs to create the required DOM elements for their product page (Please refer above DOM element dependency) and add the script file manually to their product page.

2. Product object value (Shopify provides this) must be present on the product page. If the product object is not available, then the user would need to set up a global variable with the name product with the same properties provided by Shopify. 

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