Choose a version:

Section

Groups related content into clearly-defined thematic areas. Sections have contextual styling that automatically adapts based on nesting depth. They also adjust heading levels to maintain a meaningful and accessible page structure.

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: A label used to describe the section that will be announced by assistive technologies.

When no heading property is provided or included as a children of the Section, you must provide an accessibilityLabel to describe the Section. This is important as it allows assistive technologies to provide the right context to users.
Anchor to heading heading string: A title that describes the content of the section.
Anchor to id id string: A unique identifier for the element.

SectionPropsDocs

accessibilityLabel
A label used to describe the section that will be announced by assistive technologies. When no `heading` property is provided or included as a children of the Section, you **must** provide an `accessibilityLabel` to describe the Section. This is important as it allows assistive technologies to provide the right context to users.
```
string
```
heading
A title that describes the content of the section.
```
string
```
id
A unique identifier for the element.
```
string
```

SectionProps

Was this section helpful?

Anchor to slotsSlots

Anchor to primary-action primary-action HTMLElement: The primary action to perform, provided as a button type element.
Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions to perform, provided as button type elements.

SectionElementSlotsDocs

primary-action
The primary action to perform, provided as a button type element.
```
HTMLElement
```
secondary-actions
The secondary actions to perform, provided as button type elements.
```
HTMLElement
```

SectionElementSlots

Was this section helpful?

Basic Section

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

return (

<s-section heading="Rewards">

<s-button slot="primary-action" variant="primary">

Redeem

</s-button>

<s-button slot="secondary-action" variant="secondary">

My rewards

</s-button>

<s-paragraph>

Earn 10 points for every $1 spent. Redeem 100 points for $10 off your

next purchase.

</s-paragraph>

</s-section>

);

}

examples

Basic Section

Preact

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

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

function Extension() {
  return (
    <s-section heading="Rewards">
      <s-button slot="primary-action" variant="primary">
        Redeem
      </s-button>
      <s-button slot="secondary-action" variant="secondary">
        My rewards
      </s-button>
      <s-paragraph>
        Earn 10 points for every $1 spent. Redeem 100 points for $10 off your
        next purchase.
      </s-paragraph>
    </s-section>
  );
}

Preview

An example of the Section component shows a header, some text, a primary action, and a secondary action.

Anchor to useful-forUseful for

Organizing your page in a logical structure based on nesting levels.
Creating consistency across pages.

Was this section helpful?

Anchor to considerationsConsiderations

When adding headings inside sections they automatically use a specific style, which helps keep the content organized and clear.

Was this section helpful?