---
title: pos.customer-details.block.render
description: >-
  Renders a custom information section within the customer details screen. Use
  this target for displaying supplementary customer data like loyalty status,
  points balance, or personalized information alongside standard customer
  details.


  Extensions at this target appear as persistent blocks within the customer
  details interface and support interactive elements that can launch modal
  workflows using `api.action.presentModal()` for more complex customer
  operations.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/customer-details/pos-customer-details-block-render
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/customer-details/pos-customer-details-block-render.md
---

# pos.​customer-details.​block.​render

Renders a custom information section within the customer details screen. Use this target for displaying supplementary customer data like loyalty status, points balance, or personalized information alongside standard customer details.

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

### Examples

* #### Add a customer details block

  ##### Description

  Display custom information within the customer details screen as a persistent block. This example shows how to create blocks that show supplementary customer data like loyalty status, points balance, or personalized information with interactive elements that can launch modal workflows.

  ##### 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.customer-details.block.render'>();
    return (
      <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
        <POSBlockRow>
          <Text>{'This is a block extension'}</Text>
          <Text>{`Customer ID for this customer: ${api.customer.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

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

  ##### TS

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

  export default extension('pos.customer-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(`Customer ID for this customer: ${api.customer.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);
  });
  ```