---
title: Customer details
description: >-
The customer details screen appears when merchants look up a customer during
checkout or need to access customer history and profile information. This
screen serves as the hub for customer management within POS, displaying
customer data, purchase history, and contact details.
api_version: 2026-01
api_name: pos-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/customer-details
md: >-
https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/customer-details.md
---
# Customer details
The customer details screen appears when merchants look up a customer during checkout or need to access customer history and profile information. This screen serves as the hub for customer management within POS, displaying customer data, purchase history, and contact details.
### Use cases
* **Loyalty programs:** Display loyalty status, points balance, and tier information.
* **Customer discounts:** Apply personalized discounts based on membership level or purchase history.
* **Profile management:** Launch workflows for updating customer preferences and communication settings.
* **Customer service:** Process loyalty redemptions, account adjustments, and service requests.
***
## Customer details targets
Use these targets for customer service capabilities, loyalty program integration, or tools for customer engagement and support during transactions.
### Customer details block target
`pos.customer-details.block.render`
Renders a custom information section within the customer details screen. Use this target for displaying supplementary customer data like loyalty status, points balance, or personalized information alongside standard customer details.
Extensions at this target appear as persistent blocks within the customer details interface and support interactive elements that can launch modal workflows using `shopify.action.presentModal()` for more complex customer operations.
### Support Components (15) APIs (13)
### Supported components
* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge)
* [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)
* [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)
* [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)
* [Modal](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/modal)
* [POS block](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/pos-block)
* [POS block](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/pos-block)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/section)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/stack)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/polaris-web-components/layout-and-structure/text)
* [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)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/connectivity-api)
* [Customer API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/customer-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 a custom information section to the customer details screen for displaying supplementary customer data. This example shows how to create a block that shows loyalty status, points balance, or personalized information alongside standard customer details.
##### jsx
```jsx
import {render} from 'preact';
export default async () => {
render(, document.body);
};
const Extension = () => {
return (
shopify.action.presentModal()}
>
Open action
This is a block extension
Customer ID for this customer: {shopify.customer.id}
);
};
```
### Customer details action (menu item) target
`pos.customer-details.action.menu-item.render`
Renders a single interactive button component as a menu item in the customer details action menu. Use this target for customer-specific operations like applying customer discounts, processing loyalty redemptions, or launching profile update workflows.
Extensions at this target can access the customer identifier through the Customer API to perform customer-specific operations. Menu items typically invoke `shopify.action.presentModal()` to launch the companion [modal](#customer-details-action-modal-) for complete customer 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)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/connectivity-api)
* [Customer API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/customer-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 customer details action menu for customer-specific operations. This example shows how to create a menu item that accesses customer data and launches modal workflows for tasks like applying loyalty rewards, updating profiles, or managing customer preferences.
##### jsx
```jsx
import {render} from 'preact';
export default async () => {
render(, document.body);
};
const Extension = () => {
return (
shopify.action.presentModal()}
/>
);
};
```
### Customer details action (modal) target
`pos.customer-details.action.render`
Renders a full-screen modal interface launched from customer details [menu items](#customer-details-action-menu-item-). 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 (34) APIs (13)
### 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
* [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)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/platform-apis/connectivity-api)
* [Customer API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/customer-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 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}
);
};
```
***
## Best practices
* **Update info in real time:** Update customer information immediately when changes occur to reflect current state.
* **Show clear confirmations:** Display messages specifying which customer was affected, like "Loyalty points updated for Jane Doe."
* **Ensure service continuity:** Integrate customer changes with the overall transaction and relationship.
* **Handle data responsibly:** Communicate limitations clearly. Display only necessary information and explain data collection or processing.
* **Write action-oriented labels:** Use specific labels like "Update loyalty tier" instead of generic terms like "Customer App."
* **Show status and metrics:** Display tier, points, VIP status, and action eligibility to support decisions.
***
## 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.
* Customer data is read-only through the [Customer API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/customer-api), which provides only the customer ID. To access additional customer information or modify customer data, use external API calls or integrate with the Customer API through your app backend.
***