---
title: pos.draft-order-details.block.render
description: Renders a custom section within the native draft order details screen
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/draft-order-details/pos-draft-order-details-block-render
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/draft-order-details/pos-draft-order-details-block-render.md
---

# pos.​draft-order-details.​block.​renderTarget

Renders a custom section within the native draft order details screen

### Examples

* #### Block

  ##### 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>Draft Order ID for this product: {shopify.draftOrder.id}</s-text>
      </s-pos-block>
    );
  };
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/action/pos-draft-order-details-action-menu-item-render)

[pos.draft-order-details.action.menu-item.render](https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/action/pos-draft-order-details-action-menu-item-render)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/action/pos-draft-order-details-action-render)

[pos.draft-order-details.action.render](https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/action/pos-draft-order-details-action-render)