Forms - Add a back in stock notification form

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

With a back in stock notification form, customers can let you know if they want to be informed when a sold out product becomes available again. When a customer uses the form to submit their email address, you will be sent information about the product that they are interested in. When more stock becomes available, you can let the customer know.

Note: If a product has variants, then each variant must be sold out for the form to appear on the product page. To use a form that appears for sold out variants, even when other variants for the same product are available, you will need to install a free or paid back in stock app from the Shopify App Store.

Sectioned and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes link and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes link and follow the instructions.

• Sectioned themes
• Non-sectioned themes

[TyW]

Sectioned themes

Viewing or changing where notifications are sent

When a customer submits the back in stock notification form for a sold out product, you will receive an email to the email address you have specified in the admin in the Customer email field.

To view or change your Customer email, from your Shopify admin, click Settings, then click General.

Adding the notification form code to your theme

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Sections directory, click product-template.liquid.
4. Find the opening HTML <form> tag. It will look similar to this:
   
   

   <form action="/cart/add" method="post" enctype="multipart/form-data">

   Wrap the opening <form> tag in conditional Liquid tags, so that on a new line above it is {% if product.available %}, and on a new line below it is {% endif %}. Your code should look like this:
   
   

   {% if product.available %}
   <form action="/cart/add" method="post" enctype="multipart/form-data">
   {% endif %}

5. Find the closing HTML </form> tag. Wrap it in conditional Liquid tags, so that on a new line above it is {% if product.available %}, and on a new line below it is {% endif %}. Your code should look like this:
   
   

   {% if product.available %}
   </form>
   {% endif %}

6. Find the product title in the code by looking for {{ product.title }}. On a new line below the line of code that contains the product title, paste the following code:
   
   

   {% unless product.available %}
   <div id="sold-out">
     {% form 'contact' %}
       {% if form.posted_successfully? %}
       <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
       {% else %}
       <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>
       {% endif %}
       {% if form.errors %}
       <div class="error feedback accent-text">
         <p>Please provide a valid email address.</p>
       </div>
       {% endif %}
       {% unless form.posted_successfully? %}
       <div id="notify-me-wrapper" class="clearfix" style="display:none">
         {% if customer %}
         <input type="hidden" name="contact[email]" value="{{ customer.email }}" />
         {% else %}
         <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
         {% endif %}
         <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
         <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />
       </div>
       {% endunless %}
     {% endform %}
   </div>
   {% endunless %}

   You can experiment with placing the code in different areas of the file to have the notification form display in a different position on the product page.
7. Click Save.
8. In the Assets directory, click theme.js, or theme.js.liquid.
9. At the very bottom of the file, paste the following code:
   
   

   jQuery('#notify-me').click(function() {
   
   jQuery('#notify-me-wrapper').fadeIn();
   
   return false;
   } );

10. Click Save.

[TyW]

Non-sectioned themes 

Viewing or changing where notifications are sent

When a customer submits the back in stock notification form for a sold out product, you will receive an email to the email address you have specified in the admin in the Customer email field.

To view or change your Customer email, from your Shopify admin, click Settings, then click General.

Adding the notification form code to your theme

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Sections directory, click product-template.liquid.
4. Find the opening HTML <form> tag. It will look similar to this:
   
   

   <form action="/cart/add" method="post" enctype="multipart/form-data">

   Wrap the opening <form> tag in conditional Liquid tags, so that on a new line above it is {% if product.available %}, and on a new line below it is {% endif %}. Your code should look like this:
   
   

   {% if product.available %}
   <form action="/cart/add" method="post" enctype="multipart/form-data">
   {% endif %}

5. Find the closing HTML </form> tag. Wrap it in conditional Liquid tags, so that on a new line above it is {% if product.available %}, and on a new line below it is {% endif %}. Your code should look like this:
   
   

   {% if product.available %}
   </form>
   {% endif %}

6. Find the product title in the code by looking for {{ product.title }}. On a new line below the line of code that contains the product title, paste the following code:
   
   

   {% unless product.available %}
   <div id="sold-out">
     {% form 'contact' %}
       {% if form.posted_successfully? %}
       <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
       {% else %}
       <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>
       {% endif %}
       {% if form.errors %}
       <div class="error feedback accent-text">
         <p>Please provide a valid email address.</p>
       </div>
       {% endif %}
       {% unless form.posted_successfully? %}
       <div id="notify-me-wrapper" class="clearfix" style="display:none">
         {% if customer %}
         <input type="hidden" name="contact[email]" value="{{ customer.email }}" />
         {% else %}
         <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
         {% endif %}
         <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
         <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />
       </div>
       {% endunless %}
     {% endform %}
   </div>
   {% endunless %}

   You can experiment with placing the code in different areas of the file to have the notification form display in a different position on the product page.
7. Click Save.
8. In the Assets directory, click theme.js, or theme.js.liquid.
9. At the very bottom of the file, paste the following code:
   
   

   jQuery('#notify-me').click(function() {
   
   jQuery('#notify-me-wrapper').fadeIn();
   
   return false;
   } );

10. Click Save.

[piroc_media]

to be clear, this does not automatically notify customers (who filled out the form) once the product is back in stock. 

in fact, out of hundreds of contact emails that a store might receive, it'll be cumbersome to pick the ones that relate to a specific product.

[shoptstarrbouti]

Hi , the instructions were not clear. Can you assist me with this please ? 

[thewoobles]

I put the if / end if around this part of my Debut Shopify code and it worked:

{% if product.available %}

{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels {% endunless %}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}"
>
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
</div>
{% endunless %}

<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>

{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
>
</div>
</div>
{% endif %}

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>

<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

{% endif %}

[thewoobles]

I have multiple items that are out of stock. Is there a way to modify the automatically generated email so that I know which item the customer signed up for a notification for?

[lynda]

Your code worked great for me. Thank you so much for sharing!!! I got the text to appear "Click here to be notified..." but not the email form. Any advice would be greatly appreciated.

[StudioSicily]

Same problem here, could anyone help?

[juicer]

This solution works perfect but I just have 1 issue left. For some reason, the zoom function on my featured images doesn't work anymore and I cannot swap to look at other photos. Instead, the photos open up in a new tab?!

[tristancliffe]

Hello. I can't get this to work on my test (private) shop.

Running default Debut theme.

I have added the following to product.template.liquid:

{% unless product.available %}
			<div id="sold-out">
  {% form 'contact' %}
    {% if form.posted_successfully? %}
    <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
    {% else %}
    <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>
    {% endif %}
    {% if form.errors %}
    <div class="error feedback accent-text">
      <p>Please provide a valid email address.</p>
    </div>
    {% endif %}
    {% unless form.posted_successfully? %}
    <div id="notify-me-wrapper" class="clearfix" style="display:none">
      {% if customer %}
      <input type="email" name="contact[email]" value="{{ customer.email }}" />
      {% else %}
      <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
      {% endif %}
      <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
      <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />
    </div>
    {% endunless %}
  {% endform %}
</div>
{% endunless %}

And the following to theme.js:

jQuery('#notify-me').click(function() {

jQuery('#notify-me-wrapper').fadeIn();

return false;
} );

I am happy with the layout without the {% if product.available %} on either side of the form further up, so I have omitted that, but even if I try it nothing works.

Any ideas?

[grandpoke29]

Great code and tutorial, it worked perfectly on my end.

However, I have a noob question: Where actually stores the email and how can I access the list?

Thank you.

[camillecee92]

Hi! I can't find the <form> tag. Can someone please advise? Thx! 

[facesandplaces]

I am not able to find the <FORM> tag in my product-template.liquid page

Can anyone help?

[oost]

@facesandplaces you may need to look for a liquid style tag rather than the HTML tag mentioned in the tutorial. It will look something like this:

 {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

[RafVR]

I have the same question, how would you adapt your solution with this kind of code ? How do you wrap it with the conditional Liquid tags 

{% if product.available %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
{% endif %}

And

{% if product.available %}
</form>
{% endif %}

Thank you tremendously for the valuable help, you would make my day!

[ch81]

Did you find a solution?

I did the following and getting an error when saving the file.

{% if product.available %}
            {% form 'product', product, class:form_classes, id:form_id %}
            {% endif %}

Liquid syntax error: 'endif' is not a valid delimiter for form tags. use endform

[Orlandocastilla]

Did you found a solution? I have the same problem, I can’t find the <form> In my Code, and currently I’m using the debit template too 😞

[ch81]

Unfortunately no. I'll post here if I do.

[shishir]

Hi

In DEBUT theme , you can not find form tag directly, it is added through section template named product-template.liquid and code is below

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

You can simply search for form keyword in same template

[AlexM4]

Thanks all,

following the above I managed to find the form codes and implement everything. The field and button look great on my test environment. But in testing it takes me to the page "/cart/add" and "Oops, something went wrong" message. 

I can't figure out where in the coding needs to change to keep me away from the cart/add page, and have already moved the text block all over the code to try.

Does anyone also have tips on how to further implement this for variants? I tried so far to put it within the varient if statments, but have not further played around

[FelipePartnerBR]

Click to expand...

Correction - Code positioning

Hi! 

Seems like I know what you are missing here.

The <form being mentioned is actually written differently.

The code for the product form you are looking for is at Sections > product-template.liquid (around line 130):

{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}

So you should wrap the code above with {% if product.available %} at the top and {% endif %} at the bottom.

Final result should be:

{% if product.available %}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}
{% endif %}

After this, save your file. Now, copy the following code:

{% unless product.available %}
<div id="sold-out">
  {% form 'contact' %}
    {% if form.posted_successfully? %}
    <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
    {% else %}
    <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>
    {% endif %}
    {% if form.errors %}
    <div class="error feedback accent-text">
      <p>Please provide a valid email address.</p>
    </div>
    {% endif %}
    {% unless form.posted_successfully? %}
    <div id="notify-me-wrapper" class="clearfix" style="display:none">
      {% if customer %}
      <input type="hidden" name="contact[email]" value="{{ customer.email }}" />
      {% else %}
      <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
      {% endif %}
      <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
      <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />
    </div>
    {% endunless %}
  {% endform %}
</div>
{% endunless %}

Paste it into to the same file (product-template.liquid) where it fits you the most. I personally prefer it below the Add to Cart button. Look for the payment button code and paste it right below the closing /div.

The payment button code should look like this - around line 180:

<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>

Insert the code right after this and you should be fine.

Hope you can make it, hit me up if you need something else.

[Roberto_Reyes]

Hello, ¿how can i ask for phone number also on this form?

Thank you in advanced!

[Quondy]

Hello @TyW ,

I have tried to follow up the instructions of the tutorial but I am stuck at the first instruction. I have been trying to find the HTML but it does not work for the Debut theme. I have installed Debut theme in March 2020.

Please, since there are other users with my same problem, can you please share an updated version of the "Notify Me Form" that works with Liquid code?

Thank you

[mctenold]

For clarity everyone, this just basically adds a contact form to the product page if the product is out of stock. This does NOT send any automatic notification emails to the customer once an item is back in stock.

[shoptstarrbouti]

Hi , the instructions were not clear. Can you assist me with this please ? 

[Racheal2021]

what you have just described does not exist in that template im afraid but thanks

[webg1rl]

Hello, We have implemented this into the Debut theme, but we have a bit of a problem after the form is submitted. The page jumps down to the bottom of the page and does not stay in the location of the confirmation message so the visitor knows the email was submitted. Any help in keeping the form from scrolling down after submission would be much appreciated.

[C-Unlucky]

Also confused about how to implement this code properly - this advice seems extremely outdated for templates using sections. I'm using the Simple theme and I can't find any of these HTML wrappers. Even with the help from some other users above, it still leaves us high and dry for figuring out to actually implement this code

[CJTCoops]

Any updates???

[Novice_Nina]

hi @TyW and others

would be great to see how your code can be implemented in product-template.liquid with the <form> tag now being: {% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}

thank you in advance for your help.

[oost]

I have done some testing and it seems if your theme is using that form style you must wrap the entire form in the if statement. So everything from {% form %} until {% endform %}

{% if product.available %}
     {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
          ...
          ... All your form content
          ...
     {% endform %}
{% endif %}

Then you can continue the tutorial in the original comment from step 6 and see where you get with that.

[CJTCoops]

I need to add this to a Debut theme.

Does anyone know how to do this please?

[Matt_Wilson-BPG]

Thank you so much for this it works incredibly well.

How do I go about altering the content of the email to more easily tailor my Zapier task to pull data from different sections of the email?

[danielagsb]

Hi, 

I am using boundless theme. I can find the form 'product' which appears as {% form 'product', product, id:form_id, class:form_class, data-cart-form: '' %} and wrap it in an  {% if product.available %} statement, however I don't manage to get the notification form to appear on my page (i.e. step 6). 

Can anyone help? 

Thank you so much

 

[relledge98]

I am using Testament theme and unable to find code in product-template.liquid any advice?

[charu_15]

It is working but I am not receiving any emails from Shopify when the product is in stock.

[tristancliffe2]

I can't get this to work.

I am using the default Debut theme.

I have pasted the code into product-template.liquid, and the jQuery into theme.js. I can see the "Click here to be notified..." text, but clicking here doesn't actually do anything - no fade in of an email box. The browser status bar says https://xxxx.myshopify.com/products/air-cleaner-baffle# 

The page looks how I want it to, it's just that the click here bit doesn't produce a form...

My code (copied and pasted from previous posts)

jQuery('#notify-me').click(function() {

jQuery('#notify-me-wrapper').fadeIn();

return false;
} );

 {% unless product.available %}
			<div id="sold-out">
  {% form 'contact' %}
    {% if form.posted_successfully? %}
    <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
    {% else %}
    <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>
    {% endif %}
    {% if form.errors %}
    <div class="error feedback accent-text">
      <p>Please provide a valid email address.</p>
    </div>
    {% endif %}
    {% unless form.posted_successfully? %}
    <div id="notify-me-wrapper" class="clearfix" style="display:none">
      {% if customer %}
      <input type="email" name="contact[email]" value="{{ customer.email }}" />
      {% else %}
      <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
      {% endif %}
      <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
      <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />
    </div>
    {% endunless %}
  {% endform %}
</div>
{% endunless %}

What have I done wrong?

[rizaldy]

Hi @TyW 

Thank you for sharing these codes! It works perfectly on my end. However, is there any way to email back the customers automatically when the products are back in stock?

[AntoP]

Hi,

great advice it works!

However I've a small question: how can I specify a Subject line for the notification email?

All notifications come with a default "New customer message on..."

I'd like to use the subject line to organise my inbox.

Thanks!