POSBlockRow

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Create structured rows within a blockCreate structured rows within a block

Display individual rows within a POSBlock container with optional tap interactions. This example demonstrates creating structured content rows that follow POS design specifications, ensuring visual consistency and proper handling of various device sizes and orientations.

Create structured rows within a block

Create structured rows within a block

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

import React from 'react';

import {

reactExtension,

useApi,

POSBlock,

POSBlockRow,

Text,

} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseBlock = () => {

const api =

useApi<'pos.purchase.post.block.render'>();

return (

<POSBlock>

<POSBlockRow>

<Text>Hello, world!</Text>

</POSBlockRow>

</POSBlock>

);

};

export default reactExtension(

'pos.purchase.post.block.render',

() => <PostPurchaseBlock />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import {

POSBlock,

POSBlockRow,

extension,

} from '@shopify/ui-extensions/point-of-sale';

export default extension(

'pos.purchase.post.block.render',

(root, api) => {

const posBlock =

root.createComponent(POSBlock);

const posBlockRow =

root.createComponent(POSBlockRow);

const text = root.createText('Hello, world!');

posBlockRow.append(text);

posBlock.append(posBlockRow);

root.append(posBlock);

},

);

React

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

const PostPurchaseBlock = () => {
  const api =
    useApi<'pos.purchase.post.block.render'>();

  return (
    <POSBlock>
      <POSBlockRow>
        <Text>Hello, world!</Text>
      </POSBlockRow>
    </POSBlock>
  );
};

export default reactExtension(
  'pos.purchase.post.block.render',
  () => <PostPurchaseBlock />,
);

TS

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

export default extension(
  'pos.purchase.post.block.render',
  (root, api) => {
    const posBlock =
      root.createComponent(POSBlock);

    const posBlockRow =
      root.createComponent(POSBlockRow);

    const text = root.createText('Hello, world!');

    posBlockRow.append(text);
    posBlock.append(posBlockRow);
    root.append(posBlock);
  },
);

Anchor to Best practicesBest practices

• Organize content logically within rows: Structure your POSBlockRow content to be scannable and focused. Each row should represent a discrete piece of information or functionality that users can easily understand and interact with.
• Provide visual feedback for interactive rows: When rows are interactive (have onPress callbacks), ensure users understand they can be tapped.
• Keep row content concise and focused: Design row content to be easily readable and actionable within the constrained space of a POSBlock. Focus on the most important information and avoid cluttering rows with excessive detail.
• Maintain consistent interaction patterns: Use similar onPress behaviors across different POSBlockRow instances in your extension to create predictable user experiences. Consistent interaction patterns help merchants understand and trust your extension.

Anchor to LimitationsLimitations

• POSBlockRow can only be used as children of POSBlock components—it can't be used independently or within other container types.
• The component's visual styling and layout are controlled by the POS design system—custom row styling beyond content organization isn't supported.
• Row content is provided through child components rather than direct content properties—organize your row content through component composition.
• Interactive behavior is limited to the onPress callback—complex interactions or multiple actions for each row require custom implementation within the row content.