I'm looking to add the option to select quantity on the product page for desktop and mobile. I'd like to incorporate it into the cta, but we already have 'add to wishlist' next to the cta.

Any suggestions welcome. Thank you.

Wireframes of the current layout attached and a suggestion of how to go about this. Desktop Mobile Suggestion

2 Answers 2


This is how a webshop I know does it.

Screenshot of add to cart CTA


It depends on the situation. If your goal is to get a better shopping cart size / value, you can put more focus on the quantity. From this wireframe, it is not still clear what is the difference between "valued at" and "per product".

The other aspect is, that you can add a counter to the button as well. If the user press the Add to cart button, an indicator shows: 1 item, 2 items...etc. I have seen plenty of times that users were pressing the Add to cart button several times when they wanted to buy more than 1 item per product. It can be done with button states instead of different quantity selector component.

Other recommendation: the like (make favorite) button can lead to cart abandonment. It suggests the user to leave this process and get back later. A business need is that the user finishes the process and orders the product. In this case, I think it would be better if the favorite icon is put somewhere else. Maybe on to the product card itself. The so-called red route here is that the product is ordered and paid.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.