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.
Text
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::Render
Before - Checkout::Cart
Line Details::Render After - Checkout::Cart
Lines::Render After - Checkout::Contact::Render
After - Checkout::Customer
Information::Render After - Checkout::Delivery
Address::Render Before - Checkout::Dynamic::Render
- Checkout::Pickup
Locations::Render After - Checkout::Pickup
Locations::Render Before - Checkout::Pickup
Points::Render After - Checkout::Pickup
Points::Render Before - Checkout::Reductions::Render
After - Checkout::Reductions::Render
Before - Checkout::Shipping
Method Details::Render After - Checkout::Shipping
Method Details::Render Expanded - Checkout::Shipping
Methods::Render After - Checkout::Shipping
Methods::Render Before - Checkout::Thank
You::Cart Line Details::Render After - Checkout::Thank
You::Cart Lines::Render After - Checkout::Thank
You::Customer Information::Render After - Checkout::Thank
You::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
Supported targets
- Checkout::Actions::Render
Before - Checkout::Cart
Line Details::Render After - Checkout::Cart
Lines::Render After - Checkout::Contact::Render
After - Checkout::Customer
Information::Render After - Checkout::Delivery
Address::Render Before - Checkout::Dynamic::Render
- Checkout::Pickup
Locations::Render After - Checkout::Pickup
Locations::Render Before - Checkout::Pickup
Points::Render After - Checkout::Pickup
Points::Render Before - Checkout::Reductions::Render
After - Checkout::Reductions::Render
Before - Checkout::Shipping
Method Details::Render After - Checkout::Shipping
Method Details::Render Expanded - Checkout::Shipping
Methods::Render After - Checkout::Shipping
Methods::Render Before - Checkout::Thank
You::Cart Line Details::Render After - Checkout::Thank
You::Cart Lines::Render After - Checkout::Thank
You::Customer Information::Render After - Checkout::Thank
You::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
Text block is used to render a block of text that occupies the full width available, like a paragraph.
- Anchor to appearanceappearanceappearance'subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical''subdued' | 'accent' | 'decorative' | 'info' | 'success' | 'warning' | 'critical'
Changes the visual appearance
- Anchor to emphasisemphasisemphasisEmphasisEmphasis
Use to emphasize a word or a group of words.
- Anchor to idididstringstring
A unique identifier for the component.
- Anchor to inlineAlignmentinlineAlignmentinlineAlignmentInlineAlignmentInlineAlignment
Align text along the main axis.
- Anchor to sizesizesizeTextSizeTextSize
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'TextSize
Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'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 Text
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 (
<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>
);
}
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. |
Anchor to Best practicesBest practices
- Create contrast between more and less important text with properties such as
size,emphasis, andappearance.
Was this page helpful?