Notify customer when product back in stock button

Hi @rudolfo

Katrine from Plak support here

if I understand well, you would like to have a sign up button for (notify me when this item is back in stock).

Coding this feature is relatively easy but make it functional automatically is for now impossible due the theme limitation.

For now (except using a third party app) there is any way to send an automatic email when your item is back in stock, the only way you can do is to give a specific tag to customers who enter their email using the form (notify me), and send a manual email to this tagged audience

Here is a draft of the code you can put wherever you desire in your product page to show this notification form :

{% 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="#">here</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; margin:10px 0;"> {% if customer %} <input type="hidden" name="contact[email]" value="{{ customer.email }}" /> {% else %} <input style="float:left; width:200px;" 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 }} becomes available." /> <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" /> </div> {% endunless %} <script> $('#notify-me-wrapper [type=submit]').click(function(e) { e.preventDefault(); BISPopover.create($(this).prevAll('[type=email]').val(), {{product.variants.first.id}}) .then(function(data) { if (data.status == 'OK') { alert(data.message) } else { var msg = []; for(var i in data.errors) { msg.push(data.errors[i]); } alert(msg.join("\n")); } }); }); jQuery('#notify-me').click(function() { {% if customer %} jQuery('#sold-out form').submit(); {% else %} jQuery('#notify-me-wrapper').fadeIn(); {% endif %} return false; } ); </script> {% endform %}

In case you would't want to use an app and use an embedded feature, let me know so i can style this code and add to it a condition to show it only when an item is out of stock

Kind regards,

Katrine

Wow! thank you Katrine 🙂 I would ideally like it to only be displayed when the product is out of stock. I should be able to filter by tag on my autoresponder so that would work perfectly. Can you adjust the code so it's only displayed when the stock hits zero?

Ok @rudolfo this is great ! Please allow me few times to customize this code and find a way to let it add a tag to subscribers.

Kind regards,

take your time! I really appreciate your help 🙂

Hi again @rudolfo

Here is a step by step tutorial to add a back in stock button when an item is out of stock (if you have a variant only out of stock, this feature will not show up) and assign a tag to each one who subscribes from it.

• From your Shopify dashboard, click Online store > Actions > Edit code
• Under Snippets, click Add a new snippet 

• Name it back-in-stock and click Create snippet
• Copy and paste this below code into the new created file and click save

<p class="fade-text">Subscribe to be notified by email when this product becomes available.</p>
{%- assign formId = 'Contact_' | append: section.id -%}
{% form 'customer', id: formId, novalidate: 'novalidate', class: 'contact-form form-single-field' %}
{%- if form.posted_successfully? -%}
<p class="form-message form-message--success" tabindex="-1" data-form-status>
{{ 'general.newsletter_form.confirmation' | t }}
</p>
{%- endif -%}
<input type="hidden" name="contact[tags]" value="tag-here">
<div class="input-group {% if form.errors %} input-group--error{% endif %}">
<input type="email"
name="contact[email]"
id="{{ formId }}-email"
class="input-group__field{% if form.errors %} input--error{% endif %}"
value="{{ form.email }}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
{% if form.errors %}
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
data-form-status
{% endif %}
>
<span class="input-group__btn">
<button type="submit" class="btn" name="commit" id="Subscribe">
<span>Notfiy me</span>
</button>
</span>
</div>
{%- if form.errors contains 'email' -%}
<span id="{{ formId }}-email-error" class="input-error-message">
{% include 'icon-error' %} {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.
</span>
{%- endif -%}
{% endform %}
<script>jQuery(".btn").click(function(){jQuery(".fade-text").fadeOut()});</script>

• Open the file prod-template1.liquid and the file prod-template2.liquid and paste the below code where you would like the feature to appear

 {% unless current_variant.available %}
{% include 'back-in-stock' %}
{% endunless %}

• Click Save

You can modify the tag to assign to the subscriber by going to the file back-in-stock.liquid and search for (tag-here), you can modify it as you want, for example (send-stock-back) without the brackets.

You can also modify the text (Subscribe to be notified by email when this product becomes available) on the same file

Once you get a subscriber, you will find him in the customers section in Shopify admin and with the assigned tag

Let me know if you have any other questions

Kind regards,

Katrine

I saved the snippet and am lookin in the product liquid 1 and 2 files but have no idea what I'm looking for. I want the button to be after the green "sold out" in both the product page and the cataloge page where the product is just a little thumbnail. What does the code look like for that? and do I need to paste the liquid code you wrote in bothe the product liquid 1 and 2? Sorry I'm really new to all this. I duplicated my site incase I break it too

Is it here?!

Hi @rudolfo

When you go to (online store > Actions > Edit code) type in the search bar prod-template, the two files prod-template1.liquid and prod-template1.liquid will show up, open both of them and paste the following code just after the {% endform %}

{% unless current_variant.available %}
{% include 'back-in-stock' %}
{% endunless %}

The notify me feature will then appear under the buy it now button only if the product is out of stock

Let me know if you got the point 🙂

Kind regards,

Katrine

@plaktheme
I got it to work!!! I kept moving the code up further until it was closer to the Out of Stock and worked!!! But there is this weird "Default Title )" box that is on my page and was there before I added the code I think. How do I get rid of that?!

Hi @rudoflo

i am glad you the point 🙂

The text (default title) existed before you added the notify me feature, check your first screenshot.

This is in fact the title of your variant, in order to change it, go to your product page, and on variant section you can change this text.

Let me know if you have any other questions.

Katrine

@plaktheme

I appoligize, I cannot see the variant option on the plak product page menu or the shopify product menu. Can you include a screenshot where I change this? I have varients turned off for the shopify product could this be why I can't find it?

Since you don't have any variants @rudolfo, you have better then to disable the inventory details from the theme editor (screenshot attached)

Katrine

@plaktheme

That fixed it! Thank you. Now the yellow "Buy with Paypal" button that was below the normal purple buy button has been  replaced with just another purple "buy now" Button. What did I break lol

Buy with PayPal

Now paypal button replaced

Don't worry @rudolfo you didn't break anything 😀 This is just the dynamic shopify button that changes sometimes depending on your accepted payments used and the user location.

You can even disable it from your Theme editor => Product page

 If you have any other questions or would like to open another thread, don't hesitate.

Best regards,

Katrine