---
title: pos.product-details.block.render
description: |-
  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 `shopify.action.presentModal()` for more complex product operations.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-product-details-block-render
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/pos-product-details-block-render.md
---

# 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 `shopify.action.presentModal()` for more complex product operations.

### Examples

* #### Create a product details information block

  ##### Description

  Add a custom information section to the product details screen for displaying supplementary product data. This example shows how to create a block that provides additional product information, inventory status, or custom product attributes alongside standard product details.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-pos-block>
        <s-button
          slot="secondary-actions"
          onClick={() => shopify.action.presentModal()}
        >
          Open action
        </s-button>
        <s-text>This is a block extension</s-text>
        <s-text>Product ID for this product: {shopify.product.id}</s-text>
      </s-pos-block>
    );
  };
  ```