How to manage your Cart
The Cart is where you manage items you intend to purchase.
It displays:
• Clothing items and outfits
• Image, name, price
• Quantity
• Size (if applicable)
From here you can:
• Change quantity
• Remove items
• Search within your cart
• Select items for checkout
• Proceed to Checkout
The Cart is the third tab in the bottom navigation.
At the top of the screen, there is a segmented control:
• Cart
• Orders
This document covers the Cart tab only.
Orders are described in 12-orders.md.
When you see it
• Bottom navigation → Cart tab
Tap the Cart icon to open the screen. The Cart segment is selected by default.
• After adding an item
When you tap Add to cart in Shop 3D or other product screens, the item is added to your cart. Open the Cart tab to review or checkout.
How it works:
1. Open the Cart tab
• The cart loads (or uses cached data).
• You see:
• A list of items
• An empty cart state
• Or a loading state
2. Review cart items
Each cart entry displays:
• Product image
• Name
• Price
• Quantity
• Size (if applicable)
• Selection toggle (if enabled)
Items may be individual clothing pieces or full outfits.
3. Search within cart (if available)
• Use the search bar (e.g. “Search cart…”).
• Typing filters visible items by name or keyword.
4. Change quantity
• Use + / − controls to adjust quantity.
• Totals and checkout state update automatically.
5. Remove an item
• Tap the remove or trash icon.
• The item is deleted from the cart.
6. Select items for checkout (if selection is used)
• Toggle selection on items.
• Only selected items will be included in checkout.
If selection is not used in your build, all items are included automatically.
7. Checkout
• Tap the Checkout button at the bottom.
• You are taken to the checkout flow:
• Shipping
• Payment
• Order placement
After placing an order, it appears in Orders.
8. Switch to Orders
• Tap the Orders segment at the top.
• Displays your order history.
• Pull-to-refresh refreshes whichever tab is active.
What each button and control does
App bar
Scan (body scan icon)
• May open camera or scanning functionality.
• If not implemented, may show a placeholder message.
Title (“Cart”)
• Screen title.
Search
• Filters cart items.
Refresh
• Syncs cart with server.
• Same as pull-to-refresh.
Messages icon
• Opens Chat home.
Segmented control (Cart | Orders)
Cart
• Shows cart items.
• Default view.
Orders
• Shows order history.
• See 12-orders.md.
Cart item card
Each item includes:
Image / Name / Price
• Informational only.
Quantity control
• Increase or decrease purchase quantity.
Size (if applicable)
• Displays selected size.
• May allow size adjustment depending on implementation.
Selection toggle (if enabled)
• Includes or excludes item from checkout.
Remove
• Deletes item from cart.
Empty cart state
If no items exist:
• Message shown (e.g. “Your cart is empty”).
• Checkout button is hidden.
• May include navigation back to Shop.
Checkout button
Visible when:
• At least one item exists
• And (if selection is required) at least one item is selected
Label may display:
• Item count
• Or total price
Disabled or hidden when cart is empty.
Bottom navigation
• Shop → Opens Shop 2D
• Explore → Opens Explore
• Cart → Current screen
• Muse → Opens Muse
Creating / editing
You do not create a cart manually.
Items are added from:
• Shop 3D
• Outfit detail
• Other product screens
Editing the cart means:
• Changing quantity
• Selecting items
• Removing items
Deleting
• Removing an item deletes it from your cart.
• Removed items are not included in checkout.
Tips and limits
• If selection is enabled, ensure items are selected before checkout.
• Use refresh to sync changes made from another device.
• Checkout is unavailable when the cart is empty
