Add a product availability reminder form


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.

So, you would like to add a “Leave your email” form to your sold out product pages, to allow your customers to receive a notification when the product they are interested in becomes available again.

In this tutorial, we will:

  • Add the form automatically whenever needed. No need to assign a special template to products when they get sold out.
  • Use the email address of your customer if he's logged-in. No need to ask them for their email address if we know it already!

What we are leaving out:

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

For the above needs, you should be checking out the Back In Stock app by Yellow Robot.

The demo

See the demo store here:

The trick

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

One gotcha

We will add a form to the product.liquid template, and we will need to make sure we are not adding it within another form. Nested forms are despised by browsers, they usually don't work: you will submit the form that is within the form, and you'll end up with the outer form 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 so:

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


{% if product.available %}
{% endif %}

Adding some code to your product.liquid template

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Under the Templates header, click product.liquid.

  4. Deal with the “gotcha” exposed in the above section.

  5. Then, locate within the template code where it makes sense to add your contact form. In 99% of cases, that will be right next to some text that says 'Sold out' or 'That product is temporarily unavailable' — or anything similar.

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

  7. Click to Save your template. And you are done!

The code we just added will perform the following magic - it 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 the shop-owner. 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 type in their email address and submit the form:

Back in stock 4

After the submission, they will see feedback like so:

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 that technique for products that will be available eventually — those never sold yet — i.e. “coming soon” products. That will allow you take the pulse on how eager customers are to buy your product. Also, customers won't need to check back the availability of your product on your website again and again. Win-win situation.

Back in stock 6

Want to discuss this page?

Visit the Shopify Community