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>
2 thoughts on “Back In Stock Notification Form On Shopify – Without Any APP”
Hello Admin
Does this code work on a staging theme?
Not sure as all of our code are tested on free themes