Choose a version:

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.

Anchor to headingpropsHeadingProps

Anchor to accessibilityRole accessibilityRole Extract<, 'presentation'>: Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help buyers navigate the page.
Anchor to id id string: Unique identifier. 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: Align text along the main axis.
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.

HeadingProps

accessibilityRole
Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help buyers navigate the page.
```
Extract<AccessibilityRole, 'presentation'>
```
id
Unique identifier. Typically used to make the heading a target that another component can refer to in order to provide an alternative accessibility label.
```
string
```
inlineAlignment
Align text along the main axis.
```
InlineAlignment
```
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 `HeadingGroup`s. 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.
```
Level
```

export interface HeadingProps {
  /**
   * Unique identifier.
   * Typically used to make the heading a target that another component
   * can refer to in order to provide an alternative accessibility label.
   */
  id?: string;
  /**
   * 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 `HeadingGroup`s. 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.
   */
  level?: Level;
  /**
   * Sets the semantic meaning of the component’s content. When set,
   * the role will be used by assistive technologies to help buyers
   * navigate the page.
   */
  accessibilityRole?: Extract<AccessibilityRole, 'presentation'>;
  /**
   * Align text along the main axis.
   */
  inlineAlignment?: InlineAlignment;
}

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'complementary' | 'navigation' | 'orderedList' | 'listItem' | 'unorderedList' | 'separator' | 'status' | 'alert' | 'decorative' | 'presentation'

InlineAlignment

'start' | 'center' | 'end'

Level

1 | 2 | 3 | 4

Was this section helpful?

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>;

}

examples

Basic Heading

React

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

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

function Extension() {
  return <Heading>Store name</Heading>;
}

JS

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);
});

Preview

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 customers need to know.

Was this section helpful?

Anchor to relatedRelated

ComponentHeadingGroup

ComponentText

ComponentTextBlock