---
title: pos.cart.line-item-details.action.render
description: >-
  Renders a full-screen modal interface launched from cart line item menu items.
  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.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/cart-line-item-details/pos-cart-line-item-details-action-render
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/cart-line-item-details/pos-cart-line-item-details-action-render.md
---

# pos.​cart.​line-item-details.​action.​render

Renders a full-screen modal interface launched from cart line item menu items. 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.

### 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);
    },
  );
  ```