--- title: pos.product-details.action.render description: |- Renders a full-screen modal interface launched from product details menu items. Use this target for complex product 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 product and cart data through the Product API and support workflows with multiple screens, navigation, and interactive components. api_version: 2026-01 api_name: pos-ui-extensions source_url: html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-product-details-action-render md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-product-details-action-render.md --- # pos.​product-details.​action.​render Renders a full-screen modal interface launched from product details menu items. Use this target for complex product 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 product and cart data through the Product 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) * [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) * [Pin​Pad 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 API](https://shopify.dev/docs/api/pos-ui-extensions/2026-01/target-apis/contextual-apis/product-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 * #### Create a product details action modal ##### Description Build a full-screen modal workflow launched from a product details action menu item. This example demonstrates creating product-specific experiences with multi-step processes, forms, and product data access for operations like inventory management or product customization. ##### jsx ```jsx import {render} from 'preact'; export default async () => { render(, document.body); }; const Extension = () => { return ( Product ID: {shopify.product.id} ); }; ```