---
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: 2025-07
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 overview](https://shopify.dev/assets/assets/images/api/pos-ui-extensions/targets-overview-images/cart-details-targets-CHdElUP8.png)

***

## 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 `api.action.presentModal()` to launch the companion [modal](#cart-details-action-modal-) for complete workflows.

Support

Components (1)

APIs (11)

### Supported components

* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api)
* [Cart Line Item API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-line-item-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/locale-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Create a cart line item action menu item

  ##### 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 detailed line item data and launches modal workflows for tasks like applying discounts, adding custom properties, or verification processes.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    Button,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const ButtonComponent = () => {
    const api = useApi<'pos.cart.line-item-details.action.menu-item.render'>();

    return <Button onPress={() => api.action.presentModal()} />;
  };

  export default reactExtension(
    'pos.cart.line-item-details.action.menu-item.render',
    () => <ButtonComponent />,
  );
  ```

  ##### TS

  ```ts
  import {Button, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.cart.line-item-details.action.menu-item.render',
    (root, api) => {
      const button = root.createComponent(Button, {
        onPress: () => {
          api.action.presentModal();
        },
      });

      root.append(button);
    },
  );
  ```

### 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 (33)

APIs (13)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button)
* [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/camerascanner)
* [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datefield)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker)
* [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog)
* [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/emailfield)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/image)
* [List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/list)
* [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/navigator)
* [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/numberfield)
* [POSBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock)
* [POSBlock​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow)
* [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/pinpad)
* [Print​Preview](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/printpreview)
* [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/radiobuttonlist)
* [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/screen)
* [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview)
* [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/searchbar)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/section)
* [Section​Header](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/sectionheader)
* [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/segmentedcontrol)
* [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/selectable)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack)
* [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/stepper)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text)
* [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textarea)
* [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textfield)
* [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timefield)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api)
* [Cart Line Item API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-line-item-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/locale-api)
* [Navigation API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/navigation-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/product-search-api)
* [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/scanner-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Create a cart line item action modal

  ##### Description

  Build a full-screen modal launched from cart line item menu items for complex item workflows. This example demonstrates creating modals with multiple screens and interactive components, enabling forms, multi-step processes, or detailed information displays with full line item data access.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Text,
    Screen,
    ScrollView,
    Navigator,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const Modal = () => {
    const api = useApi<'pos.cart.line-item-details.action.render'>();
    return (
      <Navigator>
        <Screen name="CartLineItem" title="Cart Line Item">
          <ScrollView>
            <Text>{`Title for this line item: ${api.cartLineItem.title}`}</Text>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension(
    'pos.cart.line-item-details.action.render',
    () => <Modal />,
  );
  ```

  ##### TS

  ```ts
  import {
    Navigator,
    Screen,
    ScrollView,
    Text,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.cart.line-item-details.action.render',
    (root, api) => {
      const navigator = root.createComponent(Navigator);
      const screen = root.createComponent(Screen, {
        name: 'CartLineItem',
        title: 'Cart Line Item',
      });
      const scrollView = root.createComponent(ScrollView);
      const text = root.createComponent(Text);

      text.append(`Title for this line item: ${api.cartLineItem.title}`);
      scrollView.append(text);
      screen.append(scrollView);
      navigator.append(screen);
      root.append(navigator);
    },
  );
  ```

***

## Best practices

* **Show clear action confirmations:** Show clear success or error messages that specify which item was affected and what change was made. Use messages like "Gift wrapping added to Blue Sweater" or "Unable to apply discount: item excluded" to provide immediate feedback.
* **Ensure cart integration:** Ensure that cart line item changes are immediately reflected in the overall cart totals and state, such as updated cart totals, refreshed tax calculations, and modified shipping estimates.
* **Handle error states gracefully:** Communicate item limitations clearly rather than showing generic error messages. If your extension depends on specific product attributes, inventory status, or business rules, show these constraints through disabled buttons, informative modal messages, or helpful error text that explains what customers need to know about this specific item.
* **Use clear labels and reference specific items:** Use action-oriented labels that describe what will happen to this line item, and reference the specific item in confirmations. Use "Apply member discount" and "10% discount applied to Blue Sweater (Large)" instead of generic labels like "Discount app" or "Discount applied successfully."
* **Show item identification and status:** Show clear item identification and current state to confirm action targets and help customers understand availability, such as product title and variant, applied discounts, and "Eligible for employee discount."

***

## Limitations

* You can only render one [`Button`](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-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/2025-07/target-apis/contextual-apis/cart-line-item-api). To modify line items, use the [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api) methods for adding properties, setting discounts, or removing items.

***