--- title: pos.customer-details.action.render description: |- Renders a full-screen modal interface launched from customer details menu items. Use this target for complex customer 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 customer data through the Customer API and support workflows with multiple screens, navigation, and interactive components. api_version: 2025-10 api_name: pos-ui-extensions source_url: html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-customer-details-action-render md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-customer-details-action-render.md --- # pos.​customer-details.​action.​render Renders a full-screen modal interface launched from customer details menu items. Use this target for complex customer 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 customer data through the Customer API and support workflows with multiple screens, navigation, and interactive components. Support Components (28) APIs (12) ### Supported components * [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button) * [Choice​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/choicelist) * [Clickable](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/clickable) * [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datefield) * [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datepicker) * [Date​Spinner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datespinner) * [Divider](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/divider) * [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/emailfield) * [Heading](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/heading) * [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image) * [Modal](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/modal) * [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/numberfield) * [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock) * [Page](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/page) * [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock) * [Scroll​Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/scrollbox) * [Search​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/searchfield) * [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section) * [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack) * [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/text) * [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/textarea) * [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/textfield) * [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/timefield) * [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/timepicker) ### Available APIs * [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/cart-api) * [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/connectivity-api) * [Customer API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/customer-api) * [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/device-api) * [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-api) * [Pin​Pad API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/pinpad-api) * [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/print-api) * [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/product-search-api) * [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/scanner-api) * [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/session-api) * [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/storage-api) * [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/toast-api) Examples ### Examples * #### Create a customer details action modal ##### Description Build a full-screen modal workflow launched from a customer details action menu item. This example demonstrates creating customer-specific experiences with multi-step processes, forms, and customer data access for operations like loyalty management or profile updates. ##### jsx ```jsx import {render} from 'preact'; export default async () => { render(, document.body); }; const Extension = () => { return ( Customer ID: {shopify.customer.id} ); }; ```