Add a product availability reminder 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.

You can add a form to sold-out product pages that customers fill out to be notified when the product is available. When the product is back in stock, you can tell the customer by email. Click here to see a demo store with a contact form.

In this tutorial, we will:

  • Add the form automatically whenever needed, without having to assign a special template to products when they sell out.
  • Use the email address of your customer if they're logged in to your store. No need to ask them for their email address if we know it already.

The following is not covered by this tutorial:

  • Adding the form when an out of stock variant is selected while other variants of the product are still available. The whole product will need to be sold out for the form to show up with our solution.
  • Automatically sending the notification email out to your customers when the products they are interested in become available.

Note

To do the items listed above, try the Back In Stock app by Yellow Robot.

How to tell if you're using a sectioned theme

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.

Using a Shopify contact form

We will use a Shopify contact form, so you'll receive an email in your Customer email inbox when the form is submitted. The email will look something like this:

Back in stock 1

Add conditional tags to the add to cart form

We will add a form to the product-template.liquid file, and we will need to make sure we are not adding it within another form. Nested forms usually don't work in browsers - when you submit the form that is within the form, only the outer form is submitted. Some product templates contain an add to cart form even when the product is not available. If that's the case on your end, you will need to wrap the add to cart form opening and closing tags within conditionals like this:


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

...


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

Adding the contact form code

The steps for adding the contact form code have been tested for use with Shopify (free) themes. If you are using a third-party (paid) theme, the theme.js file might be different.

Note

If you are not using the Debut or Venture themes, and the customer is signed into their account, after clicking the Click here link, a Send button will appear for the customer to submit the form.

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

  3. Paste this code:

    
    <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" value="0">
        <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 %}
    
    
  4. In the Assets directory, open the theme.js file.

  5. Paste the following code at the bottom of the theme.js file:

  jQuery('#notify-me').click(function() {
    if ($("customer_notify").val() == '0'){
      jQuery('#sold-out form').submit();
    }
        else {
      jQuery('#notify-me-wrapper').fadeIn();
    }
    return false;
  } );

Don't forget to email your customer when the product they want is in stock again.

Bonus track: "Coming Soon" products

You can also use contact forms for products that are “coming soon”. That will allow you take the pulse on how eager customers are to buy your product. Also, customers won't need to repeatedly check the availability of your product on your website.

Back in stock 6

Using a Shopify contact form

We will use a Shopify contact form, so you'll receive an email in your Customer email inbox when the form is submitted. The email will look something like this:

Back in stock 1

Add conditional tags to the add to cart form

We will add a form to the product.liquid file, and we will need to make sure we are not adding it within another form. Nested forms usually don't work in browsers - when you submit the form that is within the form, only the outer form is submitted. Some product templates contain an add to cart form even when the product is not available. If that's the case on your end, you will need to wrap the add to cart form opening and closing tags within conditionals like this:


...


Adding the contact form code to your product.liquid template

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

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

  3. Add conditional tags to the add to cart form.

  4. Then, locate within the template code where it makes sense to add your contact form. Typically, that will be right next to some text that says something like 'Sold out' or 'That product is temporarily unavailable'.

  5. Paste the content of this gist in your template, in the location you just decided on.

  6. Click Save.

The code we just added will add the following text next to your Sold Out text:

Back in stock 2

If the customer is logged in, clicking on the link will immediately send an email to you. If the customer is not logged in, clicking on the link will reveal our “notify me” form. That form will look like this:

Back in stock 3

Your customer will be able to enter their email address and submit the form:

Back in stock 4

After the submission, they will see feedback like this:

Back in stock 5

Don't forget to email your customer when the product they want is in stock again.

Bonus track: "Coming Soon" products

You can also use contact forms for products that are “coming soon”. That will allow you take the pulse on how eager customers are to buy your product. Also, customers won't need to repeatedly check the availability of your product on your website.

Back in stock 6

Want to discuss this page?

Visit the Shopify Community