Admin & Team
Admin Product Manager
Admin/owner product management UI for retail and e-commerce apps. Manage products in one internal screen with full CRUD, stock counts, color/style variants with their own photos, sizes, and image upload. Deliberately separate from Admin Menu Manager (restaurant dishes/combos) — no allergens, spice level, prep time, or combos. Intended for runtime admin/owner users, not basic end users.
Uses requireAdmin (default true) for runtime gating; builder canvas shows a placeholder.
Order-time decrement happens server-side in the orders API, not in this screen.
Available on all plans.
Four things worth knowing
Full product CRUD
Title, description, price, category, tags, badge, image, and stock — all editable in one modal, persisted to AWS via the products API.
Variants need their own photos
Each color/style option gets its own uploaded photo — colors can’t be simulated from one image. Price and stock stay shared across all options.
Stock is an absolute count
The stock field here sets the number outright; it’s reduced automatically as real orders come in through the backend’s atomic order write.
Sample product seeding
Empty catalogs can be seeded with 8 sample products (apparel, footwear, accessories, home goods) as real, editable starting content.
Find it, drop it, publish
Where to find itAdd it to your admin screen
- Component picker → Admin & Team → Admin Product Manager.
- Place it on an internal admin/owner screen.
- Use registry key
admin-product-managerfor builder placement.
Before you publishFour things to check
- Keep the navigation flow admin-only as an extra access layer.
- Add your real products, or seed samples and edit them, before launch.
- Keep backend wiring available (
appId+secureApiCall) for live CRUD and image upload. - Publish so runtime gating and live product data flow are active in AppPlayer.
Access, data, and safe editable fields
| Group | Prop | Default | What it controls |
|---|---|---|---|
| Access | requireAdmin, isAdminUser | true, runtime | Runtime admin gating and non-admin access denied state. |
| Data | appId, secureApiCall, _prefetchedProducts | Runtime injected | Live backend CRUD and fast prefetched hydration. |
| Labels | headerTitle, addProductLabel, emptyStateTitle, emptyStateSubtitle, seedProductsLabel | Component defaults | Editable UI copy for header, actions, and empty states. |
| Features | showProductToggle, showProductDescription, showProductStock, showProductBadge, showProductImage, showProductCategory | true | Toggles visible fields in list cards and the editor modal. |
| Runtime | customWidth, customHeight | Runtime injected | Builder and AppPlayer display context values. |
Make it yours
All labels, feature visibility, and visual tokens below are safe to edit from Builder without changing core data flow.
| Prop | Default | What it controls |
|---|---|---|
showProductStock | true | Shows stock count and low/out-of-stock indicators on cards. |
showProductToggle, showProductDescription, showProductBadge, showProductImage, showProductCategory | true | Product field visibility in cards and the editor modal. |
primaryColor, secondaryColor, dangerColor, successColor, warningColor | Brand defaults | Action, badge, and stock-state colors. |
backgroundColor, cardBackgroundColor, borderColor | Brand defaults | Surface and border styling. |
titleColor, subtitleColor, headerColor | Brand defaults | Text hierarchy styling. |
borderRadius, fontFamily | 14, Urbanist-SemiBold | Shape and typography. |
Common mistakes to avoid
Keep access admin-only at navigation level
Use protected navigation even when requireAdmin is enabled for clearer runtime separation.
Don’t skip variant photos
A variant without its own photo falls back to a two-letter placeholder chip — always upload a real photo per color/style before publishing.
Stock here is absolute, not incremental
Editing stock in this screen sets the count outright; it doesn’t add or subtract. Order-time decrements happen automatically elsewhere.
Invalidate product data after mutations
After successful create/update/delete operations, builderData.invalidate(‘products’) keeps Product Card and other widgets in sync.