Prevent orders for items that are out of stock

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Shopify lets you edit the quantities on the cart page to whatever value the customer would like regardless of if the product is in stock. Even when clicking on the Update button, customers still get what they asked for — not what they can actually purchase.

It's only subsequently during checkout, that customers get your reality check as to what's in stock:

In stock inventory

Silently correcting quantities on the cart page

With the silent correction option, the default quantity value will return the absolute maximum a customer could purchase. For example, lets say you have a product called "Unicorn t-shirt" and the Unicorn t-shirt has only 10 in stock. When a customer tries to purchase 20 Unicorn t-shirts, the cart page will default to 10 under the quantity column. It will not allow the customer to purchase more Unicorn t-shirts.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  1. Under the "Templates" folder, locate and click on cart.liquid to open it in the online code editor.
  2. At the bottom of the cart.liquid file, add the following:
    <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) { jQuery(this).val(max); }
    });
    </script>
  3. In the same file, locate the following:

    value="{{ item.quantity }}"
  4. After value="{{ item.quantity }}", add the following:

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

    In the end, it should look similar to this:

    <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 %} />
  5. Save your changes.

Tell customers when products are out of stock

If you prefer to throw an alert, and not just fix quantities silently, you can use this JavaScript solution instead of the one above.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  1. Under the "Templates" folder, locate and click on cart.liquid to open it in the online code editor.
  2. At the bottom of the cart.liquid file, add the following:
    <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>
  3. In the same file, locate the following:

    value="{{ item.quantity }}"
  4. After value="{{ item.quantity }}", add the following:

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

    In the end, it should look similar to this:

    <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 %} />
  5. Save your changes.

Want to discuss this page?

Visit the Shopify Community