How to Notify Customers when Products are Out of Stock in Shopify

Updated: March 31, 2020

Share:

One of the most useful characteristics of Shopify is to let customers know the quantity of an item. Buyers are informed the right number of products left or sold out, hence they can make purchasing decision quickly or turn on the notification when new items arrive. As a result, the tutorial will instruct you to notify customers when products are out of stock.

Table of content

Related Posts:

Attention

The tutorial is an advanced level and requires knowledge of web design and languages such as HTML, CSS, JavaScript, and Liquid. If you encounter difficulties, you should hire a Shopify expert to assist you in customizing the activation of product notification.

How to notify customers when products are out of stock on Desktop

  • Step 1: You access Shopify admin, click Online Store and go to Themes.

  • Step 2: Find the themes that you want to edit, then press Actions then Edit Code.

  • Step 3: Open cart.liquid in the online code editor under the Template file.

  • Step 4: Add the following code at the bottom of the cart.liquid file


<script>
jQuery('[max]').change(function() {
  var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
  var value = parseInt(jQuery(this).val(), 10) || 0;
  if (value > max) {
    alert('We only have ' + max + ' of this item in stock');
    jQuery(this).val(max);
  }
});
</script>

  • Step 5: Look for the following code:

value="{{ item.quantity }}"

  • Step 6: Add this line after value= “”

{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %}

Then it turns to:


<input type="text" ... name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %} />

  • Step 7: Click Save and you turn on the notification on Desktop successfully.

How to notify customers when products are out of stock on iPhone/Android (Click here)

Step 1: You access the Shopify app, click Store.

Step 2: Open Online Store in the Sales Channels section.

Step 3: Tap Manage themes.

Step 4: Find the themes that you want to edit, then press Actions then Edit Code.

Step 5: Open cart.liquid in the online code editor under the Template file.

Step 6: Add the following code at the bottom of the cart.liquid file


<script>
jQuery('[max]').change(function() {
  var max = parseInt(jQuery(this).attr('max'), 10) || 10000;
  var value = parseInt(jQuery(this).val(), 10) || 0;
  if (value > max) {
    alert('We only have ' + max + ' of this item in stock');
    jQuery(this).val(max);
  }
});
</script>

Step 7: Look for the following code:


value="{{ item.quantity }}"

Step 8: Add this line after value= “”


{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %}

Then it turns to:


<input type="text" ... name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %} max="{{ item.variant.inventory_quantity }}" {% endunless %} />

Step 9: Click Save.

Conclusion

Briefly, the tutorial aims to help online store managers to notify customers when products are out-of-stock. The notification will create a more comfortable shopping experience on your store. We hope that the instruction is useful and you will welcome more shoppers. If you have any comments or feedback, let us know. For further information, check out our guides for Shopify developers.

Recommend for you
Image Description
Abandoned Cart Recovery [Free]

Setup Abandoned cart recovery in 1-click

Learn more
Image Description
SEO Suite [Free]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Comments for Notify Customers when Products are Out of Stock



People also searched for

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up