Skip to main content
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.

Heading

Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method.

Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies.

Support
Targets (50)

Supported targets

Anchor to HeadingPropsHeadingProps

Anchor to accessibilityRole
accessibilityRole
'presentation'

Sets the semantic meaning of the heading for assistive technologies. When set, the role overrides the default heading semantics.

  • presentation: Strips the heading level, preventing the element's implicit ARIA semantics from being exposed to the accessibility tree.
Anchor to id
id
string

A unique identifier for the component. Typically used to make the heading a target that another component can refer to in order to provide an alternative accessibility label.

Anchor to inlineAlignment
inlineAlignment

Aligns the heading text along the inline axis (horizontal in standard writing modes).

Anchor to level
level

The visual level of the heading. When not set, the heading will use its "automatic" heading level, which is determined by the level of nesting within ancestor HeadingGroups. No matter what value you provide here, the semantic level (e.g., how the heading contributes to the document outline) is determined exclusively by the "automatic" heading level.

Anchor to ExamplesExamples

Anchor to Basic HeadingBasic Heading

Basic Heading

Example

Basic Heading

import {
reactExtension,
Heading,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return <Heading>Store name</Heading>;
}
import {extension, Heading} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const heading = root.createComponent(Heading, undefined, 'Store name');

root.appendChild(heading);
});

Anchor to Best practicesBest practices

  • Add a heading at the top of each section that clearly describe what’s below.

  • Use the heading to highlight the most important concepts or pieces of information that buyers need to know.

Anchor to RelatedRelated

ComponentHeadingGroup
ComponentText
ComponentTextBlock
Was this page helpful?