Add a back in stock notification form

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following 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.

Product availability notification form

Sectioned and non-sectioned themes

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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 button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

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.

Customer email

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. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Sections directory, click product-template.liquid.

  3. 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 %}
    
    
  4. 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 %}
    
  5. 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.

  6. Click Save.

  7. In the Assets directory, click theme.js, or theme.js.liquid.

  8. At the very bottom of the file, paste the following code:

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

Demo store

Click here to see a demo store with a contact form.

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 set up in the admin to be your Customer email.

Customer email

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. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click product.liquid.

  3. 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 %}
    
    
  4. 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 %}
    
  5. 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 %}
        <script>
        jQuery('#notify-me').click(function() {
          {% if customer %}
          jQuery('#sold-out form').submit();
          {% else %}            
          jQuery('#notify-me-wrapper').fadeIn();           
          {% endif %}
          return false;
        } );
        </script>
      {% 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.

  6. Click Save.

Demo store

Click here to see a demo store with a contact form.

Want to discuss this page?

Visit the Shopify Community