Floating Cart Button
Quick access to the active cart from anywhere in the app.
The floating cart button is an always-visible shortcut that keeps the active cart one tap away while staff browse products or navigate other parts of the app. Tapping it slides up a full-height cart panel so you can review items, apply promotions, or proceed to checkout without leaving the current screen.
Where the button appears
The floating cart button sits in the bottom-right corner of the screen (16 px from the right edge and 16 px from the bottom).
| Screen | Shown |
|---|---|
| Home screen on mobile and smaller tablet layouts | Yes — the cart panel is not shown inline, so the button provides cart access |
| Home screen on wide tablet and desktop layouts | No — the cart panel is already visible as a side panel on the right |
| Products page | Yes — always shown in the bottom-right corner |
The item count badge
When the active cart contains at least one line item, a red circular badge appears in the top-right corner of the button. The badge shows the total number of line items in the cart as a white number.
| Cart state | Badge |
|---|---|
| No active cart, or active cart is empty | No badge — button shows the cart icon only |
| Active cart with 1 or more items | Red badge with the line-item count |
The badge updates automatically whenever a line item is added or removed — no manual refresh needed.
Opening the cart panel
Tap the floating cart button. A cart panel sheet slides up from the bottom of the screen. The sheet:
- Opens to 95 % of the screen height by default, showing the full cart.
- Can be dragged down to 50 % of the screen height if you want to see the content behind it.
- Can be dragged up to restore it to full height.
- Contains the same Cart Panel that is visible inline on wider screens — item list, totals, payment status, and the Pay and Order buttons.
To close the cart panel, drag it fully downward or tap outside the sheet.