FROM CACHE - en_header

Forms - Add a back in stock notification form

TyW
Community Manager
Community Manager
416 40 1106

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.

 

stock01.jpg

 

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.

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 39 (39)
TyW
Community Manager
Community Manager
416 40 1106

 

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.

 

stock-sec01.jpg

 

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 | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

TyW
Community Manager
Community Manager
416 40 1106

 

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.

 

stock-sec01.jpg

 

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 | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

piroc_media
Shopify Expert
46 0 10

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.

 

facesandplaces
New Member
1 0 0

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

 

Can anyone help?

oost
New Member
2 0 5

@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: '' %}
Check out our Shopify apps at https://oostapps.com
RafVR
Tourist
5 0 2

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
Tourist
6 0 2

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
New Member
1 0 0
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
Tourist
6 0 2
Unfortunately no. I'll post here if I do.
C-Unlucky
Tourist
6 1 12

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
Tourist
9 0 2

Any updates???

Novice_Nina
Tourist
14 0 0

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.

CJTCoops
Tourist
9 0 2

I need to add this to a Debut theme.

Does anyone know how to do this please?

oost
New Member
2 0 5

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.

Check out our Shopify apps at https://oostapps.com
shishir
New Member
2 0 0

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
Tourist
8 0 1

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

Matt_Wilson-BPG
Excursionist
37 0 4

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
Explorer
78 0 17

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

 

 

Roberto_Reyes
New Member
3 0 0

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

 

Thank you in advanced!