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.
SkeletonTextBlock
The skeleton text block component displays a placeholder representation of a block of text while it loads. Use skeleton text block to reserve space for paragraph-level content during loading states.
Optionally pass text content inside the component to use as a base for the rendered skeleton shape.
Supported targets
- Customer
Account::Kitchen Sink - customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- Customer
Account::Kitchen Sink - customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the SkeletonTextBlock component.
- Anchor to idididstringstring
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 lineslineslinesnumbernumberDefault: 1Default: 1
The number of text lines the skeleton renders when no children are provided. Use this to match the expected paragraph length of the content being loaded.
- Anchor to sizesizesizeTextSizeTextSize
A keyword that sets the size of the skeleton to match the text it replaces. The size maps to the design system's type scale, ensuring the placeholder accurately represents the final content dimensions.
TextSize
A keyword that maps to a predefined text size from the design system. Includes all standard `Size` values plus `medium`, which sits between `base` and `large`.
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 Display a paragraph placeholderDisplay a paragraph placeholder
Reserve space for block-level text while content loads. This example renders a skeleton text block as a paragraph placeholder.Display a paragraph placeholder
Display a paragraph placeholder
React
import {
reactExtension,
SkeletonTextBlock,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => <Extension />,
);
function Extension() {
return <SkeletonTextBlock />;
}JS
import {extension, SkeletonTextBlock} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const skeletonTextBlock = root.createComponent(SkeletonTextBlock);
root.appendChild(skeletonTextBlock);
});Anchor to Best practicesBest practices
- Match expected content length: Provide representative text content to create an accurate skeleton.
- Use for block content: For inline text placeholders, use SkeletonText instead.
Anchor to LimitationsLimitations
- Represents block-level text only. For inline text placeholders, use SkeletonText.