Choose a version:

TextBlock

Text block is used to render a block of text that occupies the full width available, like a paragraph.

Support

Targets (50)

Supported targets

Checkout::Actions::RenderBefore
Checkout::CartLineDetails::RenderAfter
Checkout::CartLines::RenderAfter
Checkout::Contact::RenderAfter
Checkout::CustomerInformation::RenderAfter
Checkout::DeliveryAddress::RenderBefore
Checkout::Dynamic::Render
Checkout::PickupLocations::RenderAfter
Checkout::PickupLocations::RenderBefore
Checkout::PickupPoints::RenderAfter
Checkout::PickupPoints::RenderBefore
Checkout::Reductions::RenderAfter
Checkout::Reductions::RenderBefore
Checkout::ShippingMethodDetails::RenderAfter
Checkout::ShippingMethodDetails::RenderExpanded
Checkout::ShippingMethods::RenderAfter
Checkout::ShippingMethods::RenderBefore
Checkout::ThankYou::CartLineDetails::RenderAfter
Checkout::ThankYou::CartLines::RenderAfter
Checkout::ThankYou::CustomerInformation::RenderAfter
Checkout::ThankYou::Dynamic::Render
purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

Anchor to TextBlockPropsTextBlockProps

Anchor to appearance appearance 'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical': Changes the visual appearance of the text block, letting you convey meaning through color.

accent: Conveys emphasis and draws attention to the element.

subdued: Conveys a subdued or disabled state.

info: Conveys informational content.

success: Conveys a successful interaction.

warning: Conveys something needs attention or action.

critical: Conveys a problem has arisen.

decorative: Uses the decorative color set within the theme.
Anchor to emphasis emphasis: Use to emphasize a word or a group of words within the text block. Set to bold or italic to apply typographic emphasis that communicates visual hierarchy or stress.

italic: Sets the text block in italic. Combine with an accessibilityRole of offset or stress to add more meaning to the text.

bold: Sets the text block in bold. Combine with an accessibilityRole of strong to add more meaning to the text.
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: Aligns the text along the inline axis. Use this to control the horizontal text alignment within the text block.
Anchor to size size: A keyword that sets the size of the text block. Sizes map to the design system's type scale.

extraSmall: The smallest text size.

small: A smaller text size for secondary content.

base: The default text size for body content.

medium: A slightly larger text size.

large: A larger text size for emphasis.

extraLarge: The largest text size.

Emphasis

A keyword that controls typographic emphasis on a text component. Use emphasis to draw attention to a word or group of words within a passage.

'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 Basic TextBlockBasic TextBlock

Basic TextBlock

Basic TextBlock

import {

reactExtension,

TextBlock,

BlockStack,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.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/checkout';

export default extension('purchase.checkout.block.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/checkout';

export default reactExtension(
  'purchase.checkout.block.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/checkout';

export default extension('purchase.checkout.block.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 AppearanceAppearance

Value	Description
`"accent"`	Conveys emphasis and draws attention to the element.
`"subdued"`	Conveys a subdued or disabled state for the element.
`"info"`	Conveys that the element is informative or has information.
`"success"`	Convey a successful interaction.
`"warning"`	Convey something needs attention or an action needs to be taken.
`"critical"`	Conveys a problem has arisen.