Add a back in stock notification form

This page was printed on May 25, 2019. For the current version, visit https://help.shopify.com/en/themes/customization/forms/add-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.

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

Note

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, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

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 %}

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:

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 %}

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: