---
title: Product details
description: The product details screen appears when merchants search for a product, scan a barcode, or browse inventory during a transaction. This screen displays product information including pricing, inventory levels, variants, and product specifications that merchants need to serve customers.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/product-details
  md: https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/product-details.md
---

# Product details

The product details screen appears when merchants search for a product, scan a barcode, or browse inventory during a transaction. This screen displays product information including pricing, inventory levels, variants, and product specifications that merchants need to serve customers.

### Use cases

* **Product information:** Display specifications, care instructions, and detailed descriptions.
* **Inventory management:** Adjust stock levels, update pricing, and configure variants.
* **Sales optimization:** Show bundling suggestions, upselling opportunities, and product recommendations.
* **External integrations:** Connect with inventory systems, PIM (Product Information Management) tools, or supplier platforms.

![Product details targets overview](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/api/pos-ui-extensions/targets-overview-images/product-details-targets-WeXxrSXw.png)

***

## Product details targets

Use these targets for product management capabilities, inventory workflows, or integration with external systems for product information and analytics.

### Product details block target

`pos.product-details.block.render`

Renders a custom information section within the product details screen. Use this target for displaying supplementary product data like detailed specifications, inventory status, or related product recommendations alongside standard product details.

Extensions at this target appear as persistent blocks within the product details interface and support interactive elements that can launch modal workflows using `api.action.presentModal()` for more complex product operations.

Support

Components (11)

APIs (11)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker)
* [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/image)
* [POSBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock)
* [POSBlock​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/locale-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/print-api)
* [Product API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/product-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Add a product details block

  ##### Description

  Display custom information within the product details screen as a persistent block. This example shows how to create blocks that show supplementary product data like detailed specifications, inventory status, or related recommendations with interactive elements.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Text,
    useApi,
    reactExtension,
    POSBlock,
    POSBlockRow,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const Block = () => {
    const api = useApi<'pos.product-details.block.render'>();
    return (
      <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
        <POSBlockRow>
          <Text>{'This is a block extension'}</Text>
          <Text>{`Product ID for this product: ${api.product.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

  export default reactExtension('pos.product-details.block.render', () => (
    <Block />
  ));
  ```

  ##### TS

  ```ts
  import {
    POSBlock,
    Text,
    POSBlockRow,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.product-details.block.render', (root, api) => {
    const block = root.createComponent(POSBlock, {
      action: {title: 'Open action', onPress: api.action.presentModal},
    });

    const mainText = root.createComponent(Text);
    mainText.append('This is a block extension');

    const subtitleText = root.createComponent(Text);
    subtitleText.append(`Product ID for this product: ${api.product.id}`);

    const blockMainRow = root.createComponent(POSBlockRow);
    blockMainRow.append(mainText);

    const blockSubtitleRow = root.createComponent(POSBlockRow);
    blockSubtitleRow.append(subtitleText);
    block.append(blockMainRow);
    block.append(blockSubtitleRow);

    root.append(block);
  });
  ```

### Product details action (menu item) target

`pos.product-details.action.menu-item.render`

Renders a single interactive button component as a menu item in the product details action menu. Use this target for product-specific operations like inventory adjustments, product analytics, or integration with external product management systems.

Extensions at this target can access the product identifier through the Product API to perform product-specific operations. Menu items typically invoke `api.action.presentModal()` to launch the companion [modal](#product-details-action-modal-) for complete product workflows.

Support

Components (1)

APIs (11)

### Supported components

* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/locale-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/print-api)
* [Product API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/product-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Create a product details action menu item

  ##### Description

  Add an interactive menu item to the product details action menu for product-specific operations. This example shows how to create a menu item that accesses product data and launches modal workflows for tasks like inventory adjustments, product analytics, or external system integrations.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    Button,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const ButtonComponent = () => {
    const api = useApi<'pos.product-details.action.menu-item.render'>();

    return <Button onPress={() => api.action.presentModal()} />;
  };

  export default reactExtension(
    'pos.product-details.action.menu-item.render',
    () => <ButtonComponent />,
  );
  ```

  ##### TS

  ```ts
  import {Button, extension} from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.product-details.action.menu-item.render',
    (root, api) => {
      const button = root.createComponent(Button, {
        onPress: () => {
          api.action.presentModal();
        },
      });

      root.append(button);
    },
  );
  ```

### Product details action (modal) target

`pos.product-details.action.render`

Renders a full-screen modal interface launched from product details [menu items](#product-details-action-menu-item-). 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 (33)

APIs (12)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button)
* [Camera​Scanner](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/camerascanner)
* [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datefield)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/datepicker)
* [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/dialog)
* [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/emailfield)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/image)
* [List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/list)
* [Navigator](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/navigator)
* [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/numberfield)
* [POSBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblock)
* [POSBlock​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posblockrow)
* [Pin​Pad](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/pinpad)
* [Print​Preview](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/printpreview)
* [Radio​Button​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/radiobuttonlist)
* [Screen](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/screen)
* [Scroll​View](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview)
* [Search​Bar](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/searchbar)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/section)
* [Section​Header](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/sectionheader)
* [Segmented​Control](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/navigation-and-content/segmentedcontrol)
* [Selectable](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/selectable)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/stack)
* [Stepper](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/stepper)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/text)
* [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textarea)
* [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/textfield)
* [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timefield)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/forms/timepicker)

### Available APIs

* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/locale-api)
* [Navigation API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/navigation-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/print-api)
* [Product API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/product-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/product-search-api)
* [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/scanner-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Create a product details action modal

  ##### Description

  Build a full-screen modal launched from product details menu items for complex product workflows. This example demonstrates creating modals with multiple screens and interactive components, enabling forms, multi-step processes, or detailed information displays with full product and cart data access.

  ##### React

  ```tsx
  import React from 'react';

  import {
    Text,
    Screen,
    ScrollView,
    Navigator,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const Modal = () => {
    const api = useApi<'pos.product-details.action.render'>();
    return (
      <Navigator>
        <Screen name="ProductDetails" title="Product Details">
          <ScrollView>
            <Text>{`Product ID: ${api.product.id}`}</Text>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension('pos.product-details.action.render', () => (
    <Modal />
  ));
  ```

  ##### TS

  ```ts
  import {
    Navigator,
    Screen,
    ScrollView,
    Text,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.product-details.action.render', (root, api) => {
    const navigator = root.createComponent(Navigator);
    const screen = root.createComponent(Screen, {
      name: 'ProductDetails',
      title: 'Product Details',
    });
    const scrollView = root.createComponent(ScrollView);
    const text = root.createComponent(Text);

    text.append(`Product ID: ${api.product.id}`);
    scrollView.append(text);
    screen.append(scrollView);
    navigator.append(screen);
    root.append(navigator);
  });
  ```

***

## Best practices

* **Show clear action confirmations:** Show clear success or error messages that specify which product was affected and what change was made. Use messages like "Product #1001 updated successfully," "Inventory adjusted for Blue T-Shirt," or "Unable to update - insufficient permissions" to provide immediate feedback.
* **Ensure product continuity:** Ensure that product-related changes integrate properly with the overall inventory and sales systems, such as updated product catalog, triggered inventory workflows, and recorded product analytics.
* **Handle error states gracefully:** Communicate product data limitations clearly rather than showing generic error messages. If your extension accesses or modifies product information, ensure you handle data responsibly, display only necessary information, and provide clear messaging about any data collection, processing, or sharing that occurs through your extension functionality.
* **Write clear and action-oriented labels:** Use action-oriented labels that specify what will happen for this particular product, with descriptive titles that indicate the information type. Use "Update inventory count" or "Product Analytics" instead of generic labels like "Product options" or "Product App."
* **Show status and product information:** Show current product status, relevant metrics, and action eligibility to support management decisions, such as inventory levels and status, "Low stock - 5 remaining," and product ID and variant details.

***

## Limitations

* You can only render one [`Button`](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/actions/button) component for each POS UI extension using the action (menu item) target.

* Product data is read-only through the [Product API](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/target-apis/contextual-apis/product-api), which provides only the product ID and variant ID. To access additional product information or modify product data, use external API calls or integrate with the Admin API through your app backend.

***