I have an ecommerce site selling lollies. I'm having a hard time figuring out the best way to allow user selection of the number of battery cells they can buy.
I wanted to allow for the following amounts of lollies to be bought only: 1, 2, 5, 10, 20, 30, 40, 10n... where n is an integer.
This is because selling 17 lollies is quite annoying as they naturally come in strips of 5. If someone really wants to buy just 1 or 2 - they can, but the unit price is higher.
My question is how do I intuitively represent this for the eCommerce site?
eCommerce sites typically have steppers.
But wouldn't it be a bit weird that the steps are non-linear? Also, I feel that it sets the expectation that you can buy an integer number of lollies - which may frustrate the user?
The alternatives I can think of are drop down menus and a button grid that shows all the options.
I like the button grid because it shows all the options at once rather than having the user click the drop down menu - saving a click. The custom button would open up a input stepper for very large numbers (150 lollies for example).
What is the best way to allow the user to select the right number of lollies?