Layout
Composition principles
Keep filters, result count, and bulk actions adjacent to the resource list. Align numerical columns and separate observed inventory from suggested actions.
Shopify Polaris / Published template
Merchant Inventory Planning Workspace
A merchant workspace for reviewing stock coverage, comparing replenishment needs, and preparing inventory actions.
Prompt reference v1
Preview
Structure blueprint
Inventory health filters lead into a resource table with product identity, stock context, incoming units, and a side panel for a selected item.
Interaction
Behavior and access
Bulk selection is explicit and reversible. Low-stock and unavailable states use text with color, critical actions explain consequences, and saved filters remain keyboard accessible.
Implementation
Engineering boundaries
Read inventory and recommendation data from server services. Use integer quantities, explicit location and time context, stable row identifiers, and URL-safe filter state without exposing internal supplier data.
Design system
Shopify Polaris token ledger
Shopify's public design guidance and components for merchant experiences.
Color roles
- model
- semantic merchant roles
- requiredRoles
- background, surface, text, interactive, critical
Typography
- approach
- merchant task hierarchy
- requirements
- scannable resource names, clear numerical context
Spacing
- approach
- task-based merchant layout
- baseUnitPx
- 4
Component rules
- feedback
- Explain consequences and recovery for critical actions.
- resources
- Keep filters and resource actions close to the resource list.
Classification