Keep customers from adding more to cart than what's available

[mooncabinshop]

I have keyfob wristlets listing in my store with 11 variants. I have the stock set to what I have on hand in the backend, but when I test on the front end I'm able to add way more quantity than what is available. I do see an error message come up that says "You can't add more *PRODUCT NAME* to the cart" but it doesn't alert the customer of what the actual amount is on hand.

How can I keep customers from adding more of one item in the cart that exceeds the quantity on hand, and/or how can I show the customer the exact quantity on hand?

[Moira]

Hey @mooncabinshop 

There are a few reasons why you could be experiencing overselling. Could you please check the following:

• Enable Inventory Tracking:

Ensure that inventory tracking is enabled for your products.
Go to your Shopify Admin > Products > Select the product > Inventory.
Check the box for "Track quantity."
 

In the same Inventory section, make sure the "Continue selling when out of stock" option is unchecked. This will prevent customers from purchasing more than what is available.

Let me know how you get on!

[mooncabinshop]

I double checked all the variants and they are checkboxed properly, so I'm not sure what's causing the issue (I'm running Studio v15).

[Sonya_2025]

Hi @mooncabinshop 

I am not sure which theme you are using?

But I have a check on the dawn theme.

We can add a block on the product template to display inventory quantity. Pls have a check if you have similar block.

[mooncabinshop]

I'm using the Studio Theme. I found the inventory block and added it advice the quantity picker. It's a start, but I would really want that quantity picker to stop at the quantity on hand and go no further. 

Thanks!

[Sonya_2025 · Accepted solution]

Pls follow below steps to set limit to your quantity picker

1. Open your theme code editor

2. Find the file main-product.liquid in the sections folder and open it.

3. Find the quantity-input code here

4.Copy below code and add the two attribute to the quantity-input box.

                        max="{{ product.selected_or_first_available_variant.inventory_quantity }}"
                        data-max="{{ product.selected_or_first_available_variant.inventory_quantity }}"

Hope this helps

[mooncabinshop]

Worked like a dream - thank you!

[palotti]

Thank you so much. I was having the same issue and your solution worked perfectly. 😉

[KarebouDesign]

Appreciate this snippet of code. Solved the problem!

[Habeebah]

Hello dear Sonya, i have emailed you pertaining to this issue, kindly reply

[dabosh]

Hi!
I'm using "Trade" theme, but sadly your solution doesn't work. Any ideas?

[Sonya_2025]

Hi @dabosh 

For "Trade" theme. Pls follow below steps

1. Find  file "product-quantity.liquid" in the sections folder

2. Copy the below code at the end of the input box. like this

    max="{{ variant.inventory_quantity }}"
    data-max="{{ variant.inventory_quantity }}"

Hope this helps!

[dabosh]

Hi!

I couldn't update/delete my review.
I wanted to edit part about message not showing. Message is showing in
default template, BUT it doesn't in my version. I think it might be caused
by a missing translation, but I wasn't able to find where to put
translation for this message.

I will try your code, but if you know where the translation could be
found and it isn't not a problem for you, could you please point me in the
right direction?

Thank you!


p.s.

If there is a way to edid review please let me know.
I really like this theme, good job guys!

[Sonya_2025]

Hi @dabosh 

I need more details about your issue.

Pls provide screenshot and it will be helpful for me to understand your issue. Feel free to email me😁

[dabosh]

Hi!

It seems that it might be a translation problem, because in default
template it works fine.
Problem I'm having now is that I can't locate this exact translation in
settings.

[dabosh]

Hi!

It did work! I was looking for "product-quantity.liquid" as mentioned, but it actually is "quantity-input.liquid"

[yarnshopuk]

Thank you. This worked for me also 🙂

[Woodswatersgear]

I tried this with dawn theme and it didn't work. This is what the lines are in my code:

data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"

[Sonya_2025]

Hi @Woodswatersgear 

Pls try the solution of this post that marked. it should work for you.

[moharsh]

Hi. The solution worked just fine, but there is one more thing needs to be done. I am still able to edit the quantity. it needs to be non- editable pls. can you suggest the solutin in the same way as you did.with snip pls. Thnaks much-

FYI - I am on balance theme.

[Sonya_2025]

Hi @moharsh 

Thanks for your feedback.

Pls follow below steps:

1. At end of the quantity-input inputbox, add the code below

onChange="setStatus({{ product.selected_or_first_available_variant.inventory_quantity }})"

2. And at the end of this file. Paste this code to this file.

<script>
   function setStatus(maxQuantity)
    {
      var quantityInput = document.getElementsByClassName('quantity__input')[0];
      if (parseInt(quantityInput.value) >= maxQuantity )
      {
        quantityInput.setAttribute('disabled', 'disabled');
      }
      else
      {
        quantityInput.removeAttribute('disabled');
      }
    }
</script>

Hope this helps!