---
title: Cart details
description: >-
The cart details screen appears when customers select items in a transaction
to modify quantities, apply discounts, or access item-specific tools. This
screen provides control over individual products during transaction building.
api_version: 2026-01
api_name: pos-ui-extensions
source_url:
html: 'https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/cart-details'
md: >-
https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/cart-details.md
---
# Cart details
The cart details screen appears when customers select items in a transaction to modify quantities, apply discounts, or access item-specific tools. This screen provides control over individual products during transaction building.
### Use cases
* **Item discounts:** Apply discounts based on customer loyalty status or product attributes.
* **Line item properties:** Add custom properties for inventory tracking or special handling.
* **Product verification:** Launch verification workflows for high-value or restricted items.
* **Item modifications:** Process returns, exchanges, or adjustments without affecting the entire cart.
***
## Cart details targets
Use these targets for item-specific customizations, cart monitoring, or product configuration tools that improve line item management.
### Cart details action (menu item) target
`pos.cart.line-item-details.action.menu-item.render`
Renders a single interactive button component as a menu item in the cart line item action menu. Use this target for item-specific operations like applying discounts, adding custom properties, or launching verification workflows for individual cart items.
Extensions at this target can access detailed line item information including title, quantity, price, discounts, properties, and product metadata through the Cart Line Item API. Menu items typically invoke `shopify.action.presentModal()` to launch the companion [modal](#cart-details-action-modal-) for complete workflows.
### Support Components (1) APIs (13)
### Supported components
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/actions/button)
### Available APIs
* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/action-api)
* [Camera API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/camera-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-api)
* [Cart Line Item API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-line-item-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/locale-api)
* [PinPad API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/pinpad-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/toast-api)
Examples
### Examples
* ####
##### Description
Add an interactive menu item to the cart line item action menu for item-specific operations. This example shows how to create a menu item that accesses line item data and launches modal workflows for tasks like applying discounts, adding custom properties, or verification workflows.
##### jsx
```jsx
import {render} from 'preact';
export default async () => {
render(, document.body);
};
const Extension = () => {
return (
shopify.action.presentModal()}
/>
);
};
```
### Cart details action (modal) target
`pos.cart.line-item-details.action.render`
Renders a full-screen modal interface launched from cart line item [menu items](#cart-details-action-menu-item-). Use this target for complex line item workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.
Extensions at this target have access to detailed line item data through the Cart Line Item API and support workflows with multiple screens, navigation, and interactive components.
### Support Components (34) APIs (14)
### Supported components
* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/actions/button)
* [Choice list](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/choice-list)
* [Clickable](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/actions/clickable)
* [Date field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/date-field)
* [Date picker](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/date-picker)
* [Date spinner](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/date-spinner)
* [Divider](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/divider)
* [Email field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/email-field)
* [Embed](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/media-and-visuals/embed)
* [Empty state](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/empty-state)
* [Heading](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/heading)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/media-and-visuals/image)
* [Link](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/actions/link)
* [Modal](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/modal)
* [Number field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/number-field)
* [POS block](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/pos-block)
* [Page](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/page)
* [POS block](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/pos-block)
* [Scroll box](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/scroll-box)
* [Search field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/search-field)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section)
* [Spinner](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/spinner)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/stack)
* [Switch](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/switch)
* [Tabs](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/tabs)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/text)
* [Text area](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/text-area)
* [Text field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/text-field)
* [Time field](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/time-field)
* [Time picker](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/forms/time-picker)
### Available APIs
* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/action-api)
* [Camera API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/camera-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-api)
* [Cart Line Item API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-line-item-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/locale-api)
* [PinPad API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/pinpad-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/product-search-api)
* [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/scanner-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/standard-apis/toast-api)
Examples
### Examples
* ####
##### Description
Build a full-screen modal workflow launched from a cart line item action menu item. This example demonstrates creating line item-specific experiences with multi-step processes, forms, and detailed line item data access for operations like customization or verification.
##### jsx
```jsx
import {render} from 'preact';
export default async () => {
render(, document.body);
};
const Extension = () => {
return (
Cart Line item action extension
);
};
```
***
## Best practices
* **Update info in real time:** Update line item information immediately when changes occur to reflect current state.
* **Show clear confirmations:** Display success or error messages specifying which item was affected and what changed.
* **Ensure cart integration:** Reflect line item changes immediately in overall cart totals and state.
* **Communicate limitations clearly:** Show item-specific constraints through disabled buttons, modal messages, or error text.
* **Use item-specific labels:** Reference the specific item in labels and confirmations, like "10% discount applied to Blue Sweater (Large)."
* **Show item identification:** Display product title, variant, and current state like applied discounts or eligibility.
***
## Limitations
* You can only render one [button](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/actions/button) component for each POS UI extension using the action (menu item) target.
* Cart line item data is read-only through the [Cart Line Item API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-line-item-api). To modify line items, use the [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/cart-api) methods for adding properties, setting discounts, or removing items.
***