--- title: Home screen (smart grid) description: The smart grid is the first screen merchants see when they open the POS app. It provides quick access to essential functions and serves as the starting point for merchant activities. api_version: 2024-07 api_name: pos-ui-extensions source_url: html: https://shopify.dev/docs/api/pos-ui-extensions/2024-07/targets/home-screen md: https://shopify.dev/docs/api/pos-ui-extensions/2024-07/targets/home-screen.md --- # Home screen (smart grid) The smart grid is the first screen merchants see when they open [the POS app](https://apps.shopify.com/shopify-pos). It provides quick access to essential functions and serves as the starting point for merchant activities. ### Use cases * **Sales analytics:** Display summaries and launch detailed reporting dashboards. * **Inventory management:** Access scanning tools, stock alerts, and bulk operations. * **Customer engagement:** Launch profile management and enrollment workflows. * **Promotions:** Configure discounts and manage campaign status. ![Home screen targets overview](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/api/pos-ui-extensions/targets-overview-images/home-overview-C-yf2wqI.png) *** ## Home screen targets Use these targets for high-frequency actions, status displays, or entry points to workflows that merchants need daily. ### Home screen tile target `pos.home.tile.render` Renders a single interactive tile component on the POS home screen's smart grid. The tile appears once during home screen initialization and remains persistent until navigation occurs. Use this target for high-frequency actions, status displays, or entry points to workflows that merchants need daily. Extensions at this target can dynamically update properties like enabled state and badge values in response to cart changes or device conditions. Tiles typically invoke `api.action.presentModal()` to launch the companion [modal](#home-screen-action-modal-) for complete workflows. Support Components (1) APIs (8) ### Supported components * [Tile](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/tile) ### Available APIs * [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/action-api) * [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/contextual-apis/cart-api) * [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/connectivity-api) * [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/device-api) * [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/locale-api) * [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/product-search-api) * [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/session-api) * [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/toast-api) Examples ### Examples * #### Show a smart grid tile ##### Description Create an interactive tile on the POS home screen smart grid. This example demonstrates rendering a tile that appears on the home screen, providing merchants with a quick access point to launch your extension modal for daily workflows and high-frequency actions. ##### React ```tsx import React from 'react'; import { Tile, reactExtension, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const TileComponent = () => { const api = useApi<'pos.home.tile.render'>(); return ( { api.action.presentModal(); }} enabled /> ); }; export default reactExtension('pos.home.tile.render', () => { return ; }); ``` ##### TS ```ts import {extension, Tile} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'My app', subtitle: 'SmartGrid vanilla-js Extension', onPress: () => api.action.presentModal(), enabled: true, }); root.append(tile); }); ``` ### Home screen action (modal) target `pos.home.modal.render` Renders a full-screen modal interface launched from smart grid tiles. The modal appears when users tap a companion [tile](#home-screen-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 (30) APIs (9) ### Supported components * [Action​Item](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/actionitem) * [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/feedback-and-status-indicators/banner) * [Button](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/button) * [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/camerascanner) * [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/datefield) * [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/datepicker) * [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/feedback-and-status-indicators/dialog) * [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/emailfield) * [Formatted​Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/formattedtextfield) * [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/media-and-visuals/image) * [List](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/list) * [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/navigator) * [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/numberfield) * [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/pinpad) * [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/radiobuttonlist) * [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/screen) * [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/scrollview) * [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/searchbar) * [Section](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/section) * [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/navigation-and-content/segmentedcontrol) * [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/selectable) * [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/stack) * [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/stepper) * [Text](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/layout-and-structure/text) * [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/textarea) * [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/textfield) * [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/timefield) * [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/forms/timepicker) ### Available APIs * [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/contextual-apis/cart-api) * [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/connectivity-api) * [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/device-api) * [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/locale-api) * [Navigation API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/navigation-api) * [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/product-search-api) * [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/platform-apis/scanner-api) * [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/session-api) * [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/target-apis/standard-apis/toast-api) Examples ### Examples * #### Show a modal from a tile ##### Description Create a full-screen modal interface launched from smart grid tiles. This example shows how to render a complete workflow experience with navigation, screens, and interactive components that appears when merchants tap your companion tile. ##### React ```tsx import React from 'react' import { Text, Screen, ScrollView, Navigator, reactExtension } from '@shopify/ui-extensions-react/point-of-sale' const Modal = () => { return ( Welcome to the extension! ) } export default reactExtension('pos.home.modal.render', () => ); ``` ##### TS ```ts import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.modal.render', (root) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'HelloWorld', title: 'Hello World!', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append('Welcome to the extension!'); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); }); ``` *** ## Best practices * **Update tiles immediately:** Update tile appearance when data changes to show the system responds to actions. * **Show clear confirmations:** Display success or error messages in modals with specific details like "Discount applied successfully." * **Use toasts for quick feedback:** Use toast messages for successful actions or errors without disrupting workflows. * **Communicate error states clearly:** Show unavailable functionality through disabled tiles, modal messages, or error text explaining next steps. * **Write action-oriented titles:** Use specific titles like "Apply loyalty discount" instead of generic labels like "Loyalty app." * **Provide contextual information:** Show eligibility requirements, status, or context through subtitles and badge values. *** ## Limitations You can only render one [`Tile`](https://shopify.dev/docs/api/pos-ui-extensions/2024-07/ui-components/actions/tile) component for each POS UI extension. ***