How can I display that the product has different sizes available in stock in the homescreen/catalog without redirecting the user to a product details screen or by opening a pop up on the desktop. Keep in mind the product may have 10 or more sizes

Is there a suitable design pattern for this which is easy to use ?

Here is three samples I did https://goo.gl/CUSkWX

  • 1
    Need more information.. going by what you have in the question at this time, you can quickly accomplish by having a drop down of different sizes.. check amazon , pick a shoe or shirt and there is a drop down with sizes.. similar to that.. but I am sensing thats not what you want.. please clarify with more information. Mobile ? or Desktop ? – PK2016 Dec 23 '15 at 18:40
  • Why the requirement that sizes have to appear on the homepage? Look at how everyone else handles this issue. The product list shows products and the detail page shows the sizing options and other info. – Ken Mohnkern Dec 23 '15 at 20:29
  • Because not everyone clicks on the details , I need him to show the size options and the price of each – Amer Enaya Dec 23 '15 at 20:31

When hovering over the product, you could display it like this

enter image description here

or something like this, if you have too many sizes to fit in

enter image description here


How about this ? Display the sizes in a ladder design to the left or right or top , bottom whatever pleases the eye.

enter image description here

  • This photo when I click on the product to preview it, I want to enable the user to change the size from the tumbnail – Amer Enaya Dec 23 '15 at 19:13
  • Is it enough if you change the size in the backend ? or does the shape, picture have to change (not knowing what product it is you have) on the display ? – PK2016 Dec 23 '15 at 19:17

You can have a simple approach using a select:

Size select

That way, the product can have a lot of different sizes and prices, and the user will know that he can change the size with the select list.

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.