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

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