Back In Stock Notification Form On Shopify – Without Any APP

Are you a Shopify store owner looking to notify customers when a sold-out product becomes available again? Adding a back-in-stock notification form can help you keep your customers engaged and increase sales. In this easy-to-follow tutorial, we will show you how to implement this feature in your Shopify store without using any apps. Our step-by-step instructions and code snippets will guide you through the process. By the end of the tutorial, you’ll have a functional back-in-stock notification system that allows customers to easily request updates on product availability. Don’t miss out on this valuable feature – start implementing it today!

Wrap The Form in IF Condition in card-product.liquid file:

Search for <product-form> code and the following code below it:

{% if product.available %}

Search for </product-form> code and add the following code above it:

{% endif %}

Add Code in main-product.liquid File:

Search for {%- when 'price' -%} and add the following code above it:

 {% 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> <br/>
{% endunless %}

Add Code in global.js File:

Add the following code at the bottom of the global.js file:

 $(document).ready(function() {
    $('#notify-me').click(function(e) {
      e.preventDefault();
      $('#notify-me-wrapper').fadeIn('slow');
    });
  });

Include jQuery in Theme

Copy jQuery CDN code from here https://releases.jquery.com/ and include it in theme.liquid file under <head>

4.9/5 - (9 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *