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 during checkout that customers get a reality check as to what's in stock:
Caution: You can only add quantity correction to your cart page at /cart
. Quantity correction will not work in a cart drawer or cart popup. You must disable any cart drawer or popup in your theme if you want to add silent quantity correction to your cart.
With the silent correction option, the default quantity value will return the absolute maximum a customer could purchase. For example, let's 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.
cart.liquid
to open it in the online code editor.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>
value="{{ item.quantity }}"
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 like 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 %} />
If you prefer to throw an alert, and not just fix quantities silently, you can use this JavaScript solution instead of the one above.
cart.liquid
to open it in the online code editor.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>
value="{{ item.quantity }}"
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 like 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 %} />
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Can this message work for a product that is set to sell into negative? It would be nice to have the "sell into negative" setting on a product for non-web sales channels, yet have the out of stock messaging (shown in your tutorial) prevent the purchase of out-of-stock items on the web.
5. In the same file, locate the following:
Where is this file?
After following the first step, the code looks like this:
{% comment %}
The contents of the cart.liquid template can be found in /sections/cart-template.liquid
{% endcomment %}
{% section 'cart-template' %}
<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>
User | Count |
---|---|
737 | |
141 | |
101 | |
64 | |
41 |