Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

TextBlock

The text block component renders a block of text that occupies the full width available, similar to a paragraph. Use text block for multi-line content like descriptions, policies, or explanatory copy.

For inline text styling within a sentence, use Text.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the TextBlock component.

Anchor to appearance appearance 'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical': Changes the visual appearance
Anchor to emphasis emphasis: Use to emphasize a word or a group of words.
Anchor to id id string: A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
Anchor to inlineAlignment inlineAlignment: Align text along the main axis.
Anchor to size size: Size of the text

Emphasis

Use to emphasize a word or a group of words.

'italic' | 'bold'

InlineAlignment

Controls how content is aligned along the inline axis (horizontal in standard writing modes). - `'start'`: Aligns content to the inline start of the container. - `'center'`: Centers content along the inline axis. - `'end'`: Aligns content to the inline end of the container.

'start' | 'center' | 'end'

Size

A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - `extraSmall`: The smallest available size. - `small`: A compact size, smaller than the default. - `base`: The default size, appropriate for most contexts. - `large`: A larger size for increased visual prominence. - `extraLarge`: The largest available keyword size. - `fill`: Stretches to fill the available space in the container.

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

Anchor to ExamplesExamples

Anchor to Display a block of textDisplay a block of text

Render a full-width block of text content. This example displays a text block component as a paragraph.

Display a block of text

A text block component rendering a paragraph of text

Display a block of text

import {

reactExtension,

TextBlock,

BlockStack,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return (

We have a 30-day return policy, which

means you have 30 days after receiving

your item to request a return.

</TextBlock>

To be eligible for a return, your item

must be in the same condition that you

received it, unworn or unused, with tags,

and in its original packaging. You’ll also

need the receipt or proof of purchase.

</TextBlock>

</BlockStack>

);

}

import {

extension,

TextBlock,

BlockStack,

} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const textBlock = root.createComponent(BlockStack, undefined, [

root.createComponent(

TextBlock,

undefined,

'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.',

root.createComponent(

TextBlock,

undefined,

'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.',

]);

root.appendChild(textBlock);

});

React

import {
  reactExtension,
  TextBlock,
  BlockStack,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <BlockStack>
      <TextBlock>
        We have a 30-day return policy, which
        means you have 30 days after receiving
        your item to request a return.
      </TextBlock>
      <TextBlock>
        To be eligible for a return, your item
        must be in the same condition that you
        received it, unworn or unused, with tags,
        and in its original packaging. You’ll also
        need the receipt or proof of purchase.
      </TextBlock>
    </BlockStack>
  );
}

JS

import {
  extension,
  TextBlock,
  BlockStack,
} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const textBlock = root.createComponent(BlockStack, undefined, [
    root.createComponent(
      TextBlock,
      undefined,
      'We have a 30-day return policy, which means you have 30 days after receiving your item to request a return.',
    ),
    root.createComponent(
      TextBlock,
      undefined,
      'To be eligible for a return, your item must be in the same condition that you received it, unworn or unused, with tags, and in its original packaging. You’ll also need the receipt or proof of purchase.',
    ),
  ]);

  root.appendChild(textBlock);
});

Anchor to Best practicesBest practices

Keep paragraphs focused: Limit each text block to a single idea for scannability.
Use appropriate size: Match the text size to the content hierarchy.
Use Text for inline styling: For emphasizing words within a text block, nest Text components inside.

Was this page helpful?

Supported targets

Supported targets

Anchor to PropertiesProperties

Emphasis

InlineAlignment

TextSize

Size

Anchor to ExamplesExamples

Anchor to Display a block of textDisplay a block of text

React

JS

Anchor to Best practicesBest practices