I am working on a design for the product page of a commerce website. I have the requirement to show multiple options (SKUs) on each product page. In the examples below, the product comes in four different sizes.

I am contemplating two potential solutions.

The first option is to display a list of all options. This makes it easy to see all options at a glance and compare the prices etc. I could potentially replace the 'Add to Basket' button next to each option with a single button below the list. That would certainly make sense if the customer wanted to add more than one option to their basket, but that is not likely.


download bmml source – Wireframes created with Balsamiq Mockups

The second option is to display the options in some form of dropdown menu, with the control to add the selected option to the basket below. This is more compact and perhaps less visually complex, but is more fiddly and makes it harder to compare the options.


download bmml source

What is the best way to present products that have multiple options like this? I wonder what people think of the above solutions. Suggestions for alternatives?

  • IMHO if you mostly stock paint, you can add a drop-down like that, but make it much more prominent so that the buyers know that there are volumes other than 60 ml. If not and if the lists of options are not terribly long (e. g. 10 sizes on avegare for each item), keep it the way it is to avoid a huge source of confusion. – Mischa Arefiev Nov 22 '12 at 17:27
  • @MischaArefiev Yes I believe products will have at most 4 or 5 options. – Matt Obee Nov 22 '12 at 19:11

I would go with a similar approach to the 1st option, since the 2nd option has a few issues:

  1. User can not easily add bottles of multiple sizes (e.g. 2*500ml for home + 1*60ml for travelling).
  2. Options are not very visible, especially if you are comparing the prices of different types of paint (you would have to open each type up, click on combobox, then calculate price per volume).

The changes I would make, would be:

  1. To grey out the options that are out of stock (yet not hide them, so the user can still add to wishlist or perhaps request a notification when available).

  2. To add price per volume (e.g. per 100ml) to make the user's decision easier.


The one drawback of the second option is how to handle "out of stock" items. Do you simply not list them (thereby giving the false impression that the company does not stock that particular variant of the item), or do you allow people to see the item in the list, but not select it (I am not sure how easy/confusing this could be for a user to understand).

The other situation to possibly account for is if you have to include images for the specific items. Again, you could try to solve this using a select box, but it starts to get crowded quickly.

Lastly, listing many items at once allows the user to perhaps select different quantities of different variants and then add multiple items to the basket in one action, instead of pressing add to basket many times. This is not the intent of your original design, but I mention it as an alternative benefit.

If you have a whole page dedicated to a product and its variants, I would rather use the space and list the variants individually (first solution). If the number of variants become too much (more than 10?) then you'll have to start thinking about compacting it (in my opinion).


I like the first one. :) But there are some improvements on it: 1. will you calculate the total price if I add more than one? 2. maybe add checkbox before every item and with only one Add to basket button will be more clear.


2nd one is similar to ebay which works great and most users will understand it. The only drawback that I could think of is if the user would like to add 250ml bottle and 60ml bottle. That could be solved by adding "Add another product" after the user pressed "Add to Basket"

  • 1
    I'm planning on keeping the user on the same page after adding a product to their basket, so they should be able to repeat the process with another option. – Matt Obee Nov 22 '12 at 19:12
  • yeah that's good idea, so then the user would be able to add as many products as possible. – Igor-G Nov 23 '12 at 9:41
  • Out of stock items could be greyed out. Check how ebay does it. – Igor-G Nov 23 '12 at 9:41

In my opinion I too vote for the first option but with some following changes. These include taking the out of stock item out of the list; moving the add to wishlist link and changing the color to under the product description (I wonder without further discovery how much these functions get used?); added a number stepper; separated with whitespace, button from number of items counter. I also have the number stepper and button in disabled state, if the product hasn't been selected (it would return to normal state, when one item or more is selected).

Not based on research just my preference.


download bmml source – Wireframes created with Balsamiq Mockups


Both solutions are good. I would suggest using the first one on individual listings and the latter for listings mixed with other products, just to make it shorter. Into the mixed listing it makes sense to offer a link to the individual full listing. That may be solution for users who want add more products from the same category.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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