Baymard and the Nielsen Norman Group, after extensive research, both agree that the best way to design your quantity selector is by using the plus and minus buttons on either side of the default value.
The plus and minus buttons are intuitively easy to understand while retaining a minimalistic elegance from a design perspective. They don’t require a keyboard and often involve the least amount of effort from the user compared to alternatives like the dropdown— which gets unwieldy whenever it has to support more than a handful of values.
Let there be a text field
For items like, say t-shirts, someone may buy two or three, which makes the plus button rather useful. For other items, say diapers, people may want to buy larger quantities, say 20 packs. In such cases, the plus and minus buttons will not be the most ideal.
Increasing the quantity from one to 20 by constant tapping cannot be pleasant. That’s the reason the buttons should be paired with an editable text field. The text box makes it easy for a customer who wants to purchase a large quantity to enter the exact quantity instead of slowly incrementing the default value by one.
Update the quantities automatically
Some antiquated sites require a user to tap an ‘update’ button before increasing or reducing a quantity. Don’t be one of them. Update the quantity as soon as the customer changes theirs. The goal is to ensure the customer makes as few clicks as possible. Any unnecessary friction should be eliminated.
A/B test a PDP quantity selector and a cart overlay quantity selector
Some sites have the quantity selector on their product detail pages, usually just above the cart button. Others only show you the quantity selector once you click the “Add to Cart” button.
Personally, I believe a quantity selector in the “Add to Cart” overlay is a bad idea. A customer taps “Add to Cart” and you insist that they select a quantity first? No. It’s an extra step that I find annoying. The default quantity is one and as such should be automatically selected when the cart button is pressed.
I prefer it when the quantity selector is on the PDP. Many shoppers leave it undisturbed at one while those who want to purchase multiple products can increase the quantity as they see fit.
But I could not find studies that conclusively support my biases. So, if you want to put your quantity selector in an “Add to Cart ” overlay, A/B test it with a native PDP quantity selector and see which one performs best.