Overview
The Product Detail page provides a comprehensive view of a single product and all its variants. It is product-centric (not SKU-centric), showing product information with a variants table below.
Page Sections
1. Product Header
| Element | Description | Product Image | Thumbnail from Shopify | Title | Product name | Vendor | Product vendor/brand | Product Type | Category (e.g., Footwear, Electronics) | Sync Badge | "🔗 Synced" or "⛓️💥 Not Synced" |
|---|
2. Alert Banner
Yellow warning banner appears if any SKUs are unsynced, showing the count and instructions to sync them.
3. KPI Cards
| KPI | Description | Data Source |
|---|---|---|
| Total Stock | Sum of quantity_available across all variants | inventory_snapshots |
| Daily Velocity | Sum of daily_sales_velocity across variants | inventory_snapshots |
| Need Reorder | Count of variants with critical or stockout status | inventory_snapshots |
| Daily Revenue | cost_per_item × total daily velocity | products + inventory_snapshots |
| Inventory Value | cost_per_item × total stock | products + inventory_snapshots |
| Avg Days Left | Average days_of_stock_remaining across variants | inventory_snapshots |
4. Sales Trend Chart
14-day daily bar chart showing revenue per day. Green bars = revenue > $0, gray bars = $0 or no orders. Date labels in "Sep 10" format.
5. Recent Orders
Table showing recent Shopify orders that contain this product, with order number, date, customer, and quantity.
6. Suppliers Card
Shows all assigned suppliers (Primary, 2nd, 3rd) with:
- Supplier name
- Cost per unit (primary syncs to Shopify)
- Lead time in days
- Minimum order quantity
Edit Suppliers button opens a modal to add/remove suppliers and set SKU-specific costs and lead times.
7. Variants Table
| Column | Description |
|---|---|
| SKU | Variant SKU code with sync status icon |
| Title | Variant title (e.g., "M / White") |
| Quantity | Available quantity (or "N/A" if not synced) |
| Status | Healthy / Low / Critical / Stockout badge |
| Daily Velocity | Units sold per day |
| Days Remaining | Estimated days until stockout |
| Actions | Edit, sync toggle |
Backorder / Preorder
Expected Availability
Products can be flagged as backorder or preorder with:
- Expected availability date — when stock will arrive
- Promised quantity — units expected
- Backorder flag — allows orders despite zero stock
- Preorder flag — product not yet released
Breadcrumb Navigation
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
/api/products/{id} | GET | Product with variants and suppliers |
/api/products/{id}/sales-chart | GET | 14-day sales data |
/api/products/{id}/recent-orders | GET | Orders for this product |
/api/products/{id}/backorder | PUT | Update backorder/preorder settings |
/api/products/{id}/suppliers | PUT | Update supplier assignments |