§ 03 / Docs
Categories
Categories group products for navigation and filtering on your storefront. This page uses a master-detail layout on desktop: pick a category from the list, edit it in the panel, and save. On mobile, the form opens in a sheet.
Master-detail layout
The left column lists existing categories with search. The right panel shows the editor for the selected item, or a create form when you add a new category. Empty selection prompts you to choose or create one.
Desktop (wide) -------------- +------------------+------------------------+ | Category list | Edit / Create panel | | - Electronics | Name (EN / AR) | | - Clothing | Slug, description | | [+ New] | [Save] [Discard] | +------------------+------------------------+ Mobile ------ List full width --> tap row --> bottom sheet form
Creating a category
Each category has display names in English and Arabic, an optional description, and a URL slug. Slugs should be short, lowercase, and hyphenated — they appear in storefront URLs.
Steps
- Click New category (or equivalent add control).
- Enter names in both languages if your store is bilingual.
- Set a unique slug — e.g. summer-sale.
- Save to persist to the server.
Editing and drafts
When you change fields, a local draft may be kept in your browser until you save or discard. If you refresh accidentally, you may see a banner offering to restore unsaved work. Always save after edits so the storefront taxonomy stays current.
Steps
- Select a category from the list.
- Update names, description, or slug.
- Click Save — validation errors appear inline if slug collides or fields are empty.
- Discard to revert the panel to the last saved server state.
How categories affect the store
Assign categories on the product form. Storefront collection pages and menus often use category slugs. Deleting or renaming a category does not delete products but may leave items uncategorized until you reassign them.