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

Updated: March 16, 2021

Share:

Drive 20-40% of your revenue with
email, SMS marketing
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="[email protected]" 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="[email protected]" 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!

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up