The product categories have a simple breadcrumb structure, which is well illustrated by the categories in the sample data, as shown in the screenshot on the right.
Categories must obey a few simple rules:
- The “>” (greater than) character is used as a separator, so for example Wines is a subcategory of Beverages, and its full name is “Beverages>Wines”.
- The full name of a category includes the names of all its parent categories. For instance Bitters is a subcategory of Beers, which in turn is a subcategory of Beverages. Its full name is “Beverages>Beers>Bitters”.
- Categories can either contain products or other categories, but not both.
- If a category contains other categories, its full name end in a separator, e.g. “Beverages>”.
- A product can only belong to one category.
The last three rules are not intuitively obvious. They are included to make things easier, both for the user and the app.
Because categories can be nested, they are represented as a tree structure. The screenshot on the right shows a category being selected from the sample data. The icon for the Beverages category indicates that it contains other categories, but no products. Tapping this category expands it, as shown below.
Note that the Beverages category has expanded, and its icon has changed. Now tapping on it would cause it to contract again, hiding all its subcategories. Beers is another parent category, which shows that categories can be nested more than one level deep.