I'm looking for a way to intuitively display three price points for a single product - leaving the user to decide upon which they'd like to pay.

Generally, successful eCommerce sites feature a single, prominent 'Add to Cart' option, which of course works well for a single price point, but how can I intuitively display the differing price points, all without distracting from the ultimate goal of getting the user to checkout?

The only example I can give of this in practice is with CodeKit. CodeKit offers the user a set of radio buttons, but for me this doesn't work.


In this particular instance the item(s) being sold are tangible goods such as t-shirts, posters etc.

We're offering three price points, £23, £25 & £27. The product that the user ends up with remains the same regardless of the price point that the user selects. The first includes a donation of £5 to charity, the second £7 and third £9.

enter image description here

  • 1
    What is the product (in a general sense)? Software? A tangible good? Are there additional features or anything else that differentiates the price points, or is it an option to pay more for the same good (as in your screenshot)? Oct 23, 2014 at 20:51
  • @thunderblaster I should have added more detail.. my apologies. So, in this particular instance it is for tangible goods such as t-shirts, posters etc. I'll update the question. Oct 23, 2014 at 21:18
  • Are you saying that the user can buy the exact same product but opt to pay more 23,25 or 27 and on top of this donate to charity? The 3 paypoints also give the user privileges later eg beta testing so technically they are different. As dan says below, the charity payment is different again and should be split. And the wireframe doesnt lead from the description. Description implies 3 choices with a further 3 choices for each, yet your wireframe only shows 6 options, not 9. And they dont add up eg 23+5=28 not 29 etc
    – colmcq
    Oct 24, 2014 at 9:21
  • Give several (partial) names to the same product, e.g. (pulled out of thin air) MyShirt Clean Conscience, MyShirt Bought Karma and MyShirt Feel Good. Then treat them the same as you would with color or size variants, say.
    – Crissov
    Oct 24, 2014 at 12:26
  • 1
    not to me Daniel, not to me! I'll have another read through and see if I can follow.
    – colmcq
    Oct 27, 2014 at 9:43

1 Answer 1


I would separate the price of the item from the charitable donation. Make the item cost £18, then have a control that allows the user to select a donation amount. The reasons I see are:

  • It highlights the donation more. Users will like having the amount they are donating clearly highlighted.
  • It may encourage more generosity. This is a bit speculative (I'm not sure if there is research on it), but it seems to me that combining the donation with the item makes it feel like you are just paying a really high price for the item (a negative), while separating it may encourage larger donations, since the buyer isn't associating the amount given with the value of an item like a T-shirt.
  • It allows more flexibility on donation amount. A basic rule of soliciting donations is that you should never limit the amount someone can choose to give. Your proposed plan actually prevents someone from donating more than £9. Depending on the cause, some people may want to donate more (perhaps many times more). If you separate the donation out, you can have more options for donation amount. Further, I would allow the user to set their own amount, as well.

My proposed design would be a separate drop-down field with some suggested donation amounts (including amounts higher than £9). There would also be an "other" option in the drop-down that makes a field appear where the user can type their own amount.

This design would create the possibility of the donor entering an amount lower than £5 (or even entering 0). You could enforce a minimum donation if you want, however, I think the results may be better if you don't do so.

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.