I have a page where the user can purchase a digital product by itself, in a three pack, or in a five pack. The complicated part is that the user may also purchase add-ons for the products in the pack, but in a separate quantity.

eg. The user may want to buy a 5 pack of the base product, but only 2 add-ons.

Is there some design pattern that solves this problem? Is there a better way of illustrating this?

I'm stumped ..

My current wireframe : /

  • What is unclear about this pattern and UI components that you have implemented? There are controls for input and labels to display the selection that the user has made. If there are some data or some evidence that it is causing user problems then it will point to where the solution can be found.
    – Michael Lai
    Commented Dec 2, 2021 at 23:42

2 Answers 2


Domain buying websites have had this add on functionality for years and could help you identify a reusable pattern that applies to your scenario.

Your design doesn't seem wrong ( considering we do not know the exact items and their addons )

enter image description here


I think one potential solution is not to separate the input process for the products and the add-ons, but rather combine them either in the input or the review stage so that the user actions are reflected immediately rather than waiting until the review/summary of the checkout process.

You can browse for examples on e-commerce sites where a product is specified and any additional add-ons are also displayed next to or below the item.

I don't think you have to worry about the users getting things wrong if you make it consistent and clear plus provide easy ways to change the input values.

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.