How to Add ‘Notify When Back in Stock’ on Shopify Without Paying for Apps

How to Add ‘Notify When Back in Stock’ on Shopify Without Paying for Apps


Introduction

When a product is out of stock, it’s frustrating for both you and your customers. But instead of losing potential sales, you can capture demand by allowing customers to sign up for back-in-stock notifications.

In this blog, we’ll show you how to add a ‘Notify Me When Available’ button to your Shopify store without using any expensive apps. You’ll keep your store lean and optimize for conversion opportunities, all while staying within Shopify’s native features.


Why Add Back-in-Stock Notifications?

  • Recover Lost Sales: Customers who couldn’t buy will be alerted when the product is available again.

  • Build a List of Interested Shoppers: Gather valuable leads for when stock is replenished.

  • Improve Customer Experience: Customers don’t have to check back repeatedly or forget about the product.


How to Implement ‘Notify Me When Available’ Button Without Apps

Instead of relying on third-party apps that might slow your site or add unnecessary features, we’ll use Shopify’s native features and some custom code.


Step 1: Add a Custom ‘Notify Me’ Button to the Product Page

  1. Go to Online Store > Themes > Edit Code.

  2. Open product-template.liquid or product-form.liquid (depending on your theme).

  3. Find the section of code that handles the ‘Add to Cart’ button.

  4. Below the Add to Cart button, add this HTML for the back-in-stock form:

{% if product.available == false %}
  <div class="notify-back-in-stock">
    <p>Sorry, this product is out of stock. Enter your email to get notified when it's back!</p>
    <form action="/contact#contact_form" method="POST">
      <input type="email" name="email" placeholder="Your Email" required>
      <input type="hidden" name="product_id" value="{{ product.id }}">
      <button type="submit">Notify Me</button>
    </form>
  </div>
{% endif %}

Step 2: Create a Contact Form to Collect Emails

  1. Go to Online Store > Pages > Add Page.

  2. Name the page “Back in Stock Notification” and include a simple form like this:

{% form 'contact' %}
  <div>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="contact[email]" required>
  </div>
  <div>
    <label for="product">Product Interested In</label>
    <input type="text" id="product" name="contact[body]" value="{{ product.title }}" readonly>
  </div>
  <button type="submit">Submit</button>
{% endform %}

This page will serve as the destination where customers' emails are collected when they submit a notification request.


Step 3: Redirect to the ‘Back in Stock’ Page

Now, configure the form so that customers are redirected to the Back in Stock page after submitting their email.

  1. Add a thank you message or a confirmation page to let customers know they’ll be notified when the product is back.

  2. In your form, add a redirect feature to send users to your "Thank You" page or to another notification page.

{% form 'contact' %}
  <input type="hidden" name="redirect" value="/pages/thank-you-notify">
  ...
{% endform %}

Step 4: Set Up Email Notifications for You (Optional)

Shopify automatically sends a notification email when a customer submits a contact form. But if you want to customize or track back-in-stock notifications more effectively, you can set up custom email notifications using Shopify’s admin:

  1. Go to Settings > Notifications.

  2. Customize the Order Confirmation email template for back-in-stock alerts.

You can also use Shopify’s Mailchimp integration to send bulk emails to those who sign up for notifications when stock is replenished.


Step 5: Manage and Notify Customers When Products Are Back in Stock

Once the product is back in stock, you can:

  1. Go to Products > Inventory.

  2. For each out-of-stock product, manually check the list of people who requested a back-in-stock alert.

  3. Send a notification email manually or use an email marketing tool like Mailchimp or Klaviyo to send a bulk email to all subscribers who requested the product.


Bonus: Automate the Process with Shopify Apps (If Desired)

While we’re sticking to a code-based solution here, if you prefer automation, apps like Back in Stock or Back In Stock by Appikon provide a more streamlined, hands-off experience. But they come with extra costs and more complexity.


Pro Tips for Optimizing Back-in-Stock Notifications

  • Add urgency in the notification: “Hurry, limited stock available!”

  • Offer an incentive: Consider offering a small discount or free shipping for customers who sign up for the alert.

  • Segment by product: If you have multiple variants, be sure to allow customers to select which specific variant they want to be notified about.


Conclusion

Adding a back-in-stock notification feature to your Shopify store is a simple and cost-effective way to recover lost sales. With just a few lines of code and some setup, you can engage customers who are interested in out-of-stock products, and keep them coming back when the product is available again.

Back to blog

Leave a comment

Please note, comments need to be approved before they are published.