Migrate to the Polaris heading component

The Polaris heading component renders section titles with automatic hierarchy based on nesting. It replaces the previous Heading component and is available as <s-heading> in API versions 2025-10 and newer.

Anchor to Removed propertiesRemoved properties

Anchor to levellevel

The Polaris heading component no longer supports level. Heading levels are determined automatically based on nesting within <s-section> components.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <>
      <s-heading>Order Summary</s-heading>
      <s-section>
        <s-heading>Shipping Details</s-heading>
      </s-section>
    </>
  );
}

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

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

function Extension() {
  return (
    <>
      <Heading level={2}>Order Summary</Heading>
      <Heading level={3}>Shipping Details</Heading>
    </>
  );
}

Anchor to inlineAlignmentinlineAlignment

The Polaris heading component no longer supports inlineAlignment. There's no direct replacement for this property.