Home > Shopify Development > Insert the notification form code to your theme

How to insert the notification form code to your theme in Shopify

Sam Nguyen
Sam Updated: March 16, 2024

Share:

Drive 20-40% of your revenue with Avada
avada email marketing

A notification form is considered very important and necessary for any e-commerse business since customers are able to lett you know whether they want to be notified when an out of stock item becomes back in stock again with it. When an user fill in the form their email address, you will be sent information on the product that interests them. Then, you can let your buyers know when it is available.

In this instruction, we are going to tell you the way to add the notification form code to your them so please keep reading our instructional writing on How to insert the notification form code to your theme to know more deeply about this topic

How to insert the notification form code to your theme

Insert the notification form code to your theme on Desktop

  • Step 1: Go to Online Store > Themes from your Shopify Admin panel. Or search for the theme that you need to adjust and then choose Actions > Edit code.

  • Step 2: Tap product-template.liquid in the Sections directory.

  • Step 3: Search for the opening HTML <form> tag. It will look like this:

<form action="/cart/add" method="post" enctype="multipart/form-data">

Wrap the opeing <form> tag in conditional Liquid tags so that it would be `` on a new line below.

Your code should look similar to this:

{% if product.available %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
{% endif %}
  • Step 4: Search the closing HTML </form> tag. Wrap it in conditional Liquid tags so that it would be `` on a new line below.

Your code should look similar to this:

{% if product.available %}
</form>
{% endif %}
  • Step 5: Look for `` to find the product title in the code. Please paste the code given below on a new line below the line of the code that contains the title of the product:
{% 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 are able to experiment with placing the code in separated areas of the line to have the notification form display in a different place on the product page.

  • Step 6: Choose Save.

  • Step 7: Click theme.js or theme.js.liquid in the Assets directory.

  • Step 8: Please paste the code given below at the very bottom of the file:

jQuery('#notify-me').click(function() {

jQuery('#notify-me-wrapper').fadeIn();

return false;
} );
  • Step 9: Tap Save.

Insert the notification form code to your theme on iPhone/Android (Click here)

  • Step 1: Choose Store from the Shopify app.

  • Step 2: Click Online Store in the Sales channels section.

  • Step 3: Choose Manage themes.

Or

  • Step 1: Search for the theme that you need to adjust and then choose Actions > Edit code.

  • Step 2: Tap product-template.liquid in the Sections directory.

  • Step 3: Search for the opening HTML <form> tag. It will look like this:

<form action="/cart/add" method="post" enctype="multipart/form-data">

Wrap the opeing <form> tag in conditional Liquid tags so that it would be on a new line below.

Your code should look similar to this:

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

  • Step 4: Search the closing HTML </form> tag. Wrap it in conditional Liquid tags so that it would be on a new line below.

Your code should look similar to this:

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

  • Step 5: Look for to find the product title in the code. Please paste the code given below on a new line below the line of the code that contains the title of the product:

{% 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 are able to experiment with placing the code in separated areas of the line to have the notification form display in a different place on the product page.

  • Step 6: Choose Save.

  • Step 7: Click theme.js or theme.js.liquid in the Assets directory.

  • Step 8: Please paste the code given below at the very bottom of the file:

jQuery('#notify-me').click(function() {

jQuery('#notify-me-wrapper').fadeIn();

return false;
} );

  • Step 9: Tap Save.
</details> ## Conclusion Thanks for having read our guide. Please kindly note that if [a product](https://avada.io/shopify/docs/how-add-new-products-shopify.html) has variants, then every variant must be already sold out for the form to be shown on the product page!


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.