I have the following scenario:

This is a website that shows the products and services of a small bakery. It has categories and subcategories of the products and services it has, and it displays them on galleries.

A picture (when you're uploading one) can belong to many categories and 1 subcategory per category selected.

I'm busting my head trying to figure out how to display the categories with their respective categories so that the person in charge of uploading this information to the website can have a better experience and a faster pace at which he does this.

enter image description here

So far this is the current form in here I want to display each category and the subcategories for each category.

Imagine the following scenario: I'm uploading a wedding cake. This wedding cake can go to the category of pastry (fondant cake or just traditional cake which are the subcategories) and in the category of events (under the subcategory of weddings).

Any ideas how can I display the categories and its respective subcategories?

  • How does the user know where (in what categories) to place each uploading photo? and who dictates in which category every photo should belong? Jan 6, 2016 at 1:44
  • The owner usually has this information, and she does this process (1 person startup). She dictates what goes where and what are the categories and/or subcategories (on the future she will pay my company to do this for her with her instruction kind of like a service)
    – codeninja
    Jan 6, 2016 at 3:32
  • This feels like tags to me. I have a photo... it belongs to x, y, z categories. ui-patterns.com/patterns/Tag/examples/789 Jan 6, 2016 at 5:24
  • what is the goal of categorization? and who it aims? (the owner or the customers?) Jan 6, 2016 at 13:21
  • It aims both the owner and the customers, the owner so he can categorize and subcategorize her products and services, and the customer/client so he can have an easier way to visualize in categories and subcategories the products and services my client offers
    – codeninja
    Jan 6, 2016 at 13:30

1 Answer 1


You should place the categorization of the product at the product page. Add a grid where the user can enter as many categories as needed. Since only one subcategory per category is allowed, when a category is selected exclude it from the list box of the other rows.

The product page should look something like this :


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Very nice idea, I have to figure out a way to hide options dynamically from the category selects (IE A product/service image cannot belong twice on the same category, but this definitely is a very good approach. I will most certainly be applying this design pattern.
    – codeninja
    Jan 6, 2016 at 13:23

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.