--- title: pos.home.modal.render description: >- Renders a full-screen modal interface launched from smart grid tiles. The modal appears when users tap a companion tile. Use this target for complete workflow experiences that require more space and functionality than the tile interface provides, such as multi-step processes, detailed information displays, or complex user interactions. Extensions at this target support full navigation hierarchies with multiple screens, scroll views, and interactive components to handle sophisticated workflows. api_version: 2025-10 api_name: pos-ui-extensions source_url: html: >- https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/smart-grid/pos-home-modal-render md: >- https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/smart-grid/pos-home-modal-render.md --- # pos.​home.​modal.​render Renders a full-screen modal interface launched from smart grid tiles. The modal appears when users tap a companion tile. Use this target for complete workflow experiences that require more space and functionality than the tile interface provides, such as multi-step processes, detailed information displays, or complex user interactions. Extensions at this target support full navigation hierarchies with multiple screens, scroll views, and interactive components to handle sophisticated workflows. Support Components (28) APIs (11) ### 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) * [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 full-screen modal for a smart grid tile ##### Description Build a complete workflow experience launched from a smart grid tile. This example demonstrates creating a full-screen modal with navigation, multiple screens, and interactive components for sophisticated workflows that require more space than the tile interface provides. ##### jsx ```jsx import {render} from 'preact'; export default async () => { render(, document.body); }; const Extension = () => { return ( Welcome to the extension! ); }; ```