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.

Section

The Section component groups related content into clearly-defined thematic areas. Sections provide visual boundaries and optional actions to organize content within POS interfaces.

Use sections to create structured layouts with clear titles and actionable elements that help users navigate and interact with grouped content.

The component supports customizable section dividers and spacing between sections, allowing you to create visual rhythm and hierarchy that guides merchants through complex forms and settings interfaces. Sections can be nested to create hierarchical content organization, with each level automatically adjusting its visual styling and semantic meaning to maintain clear structure and relationships throughout complex interfaces.

The Section component no longer has a border as of POS version 10.0.0.

Support
Targets (9)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the Section component.

Anchor to action
action

An optional action configuration displayed in the top right of the section that can be triggered by user interaction.

Anchor to title
title
string

The title text displayed at the top of the section to describe its content.

Anchor to ExamplesExamples

Anchor to Group related contentGroup related content

Organize content into clearly-defined thematic areas using sections. This example demonstrates grouping related content with titles and optional actions, creating visual boundaries and structured layouts that help merchants navigate complex interfaces.

Group related content

Organize content into clearly-defined thematic areas using sections. This example demonstrates grouping related content with titles and optional actions, creating visual boundaries and structured layouts that help merchants navigate complex interfaces.

Group related content

import React from 'react'
import { Text, Navigator, Screen, ScrollView, Stack, reactExtension, Section, useApi, Selectable } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {
const api = useApi<'pos.home.modal.render'>();

return (
<Navigator>
<Screen title="Section" name="Section">
<ScrollView>
<Stack direction="vertical" paddingHorizontal="HalfPoint">
<Section title='Items' action={{title: "Show toast", onPress: () => api.toast.show('Hello world!')}}>
<Selectable onPress={() => api.toast.show('Item 1!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 1</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 2!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 2</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 3!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 3</Text>
</Stack>
</Selectable>
<Selectable onPress={() => api.toast.show('Item 4!')}>
<Stack direction="vertical" paddingHorizontal="Small" paddingVertical="Small">
<Text>Item 4</Text>
</Stack>
</Selectable>
</Section>
</Stack>
</ScrollView>
</Screen>
</Navigator>
)
}

export default reactExtension('pos.home.modal.render', () => {
return <ModalComponent />
})
import {
extension,
Screen,
ScrollView,
Stack,
Navigator,
Text,
Section,
Selectable,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
'pos.home.modal.render',
(root, api) => {
const screen = root.createComponent(Screen, {
name: 'Section',
title: 'Section',
});

const scrollView =
root.createComponent(ScrollView);

const section = root.createComponent(
Section,
{
title: 'Section',
action: {
title: 'Show toast',
onPress: () =>
api.toast.show('Hello world!'),
},
},
);

for (let i = 1; i < 5; i++) {
const selectable = root.createComponent(
Selectable,
{
onPress: () =>
api.toast.show(`Item ${i}!`),
},
);
const stack = root.createComponent(Stack, {
paddingVertical: 'Small',
direction: 'vertical',
paddingHorizontal: 'Small',
});

const textElement =
root.createComponent(Text);
textElement.append(`Item ${i}`);

stack.append(textElement);
selectable.append(stack);
section.append(selectable);
}

const rootStack = root.createComponent(
Stack,
{
paddingHorizontal: 'HalfPoint',
direction: 'vertical',
},
);
rootStack.append(section);

scrollView.append(rootStack);
screen.append(scrollView);
const navigator =
root.createComponent(Navigator);
navigator.append(screen);
root.append(navigator);
},
);

Anchor to Best practicesBest practices

  • Design meaningful action buttons: When providing an action, use clear and descriptive button titles that indicate exactly what will happen when pressed. Avoid generic terms like "Action" in favor of specific actions like "Edit Settings" or "Add Item."
  • Group related content logically: Use sections to group content that belongs together conceptually. Each section should contain related information or controls that users would expect to find together, creating intuitive content organization.
  • Implement responsive action callbacks: Consider showing loading states or confirmation messages when actions require network requests or significant processing time.
  • Maintain consistent section patterns: Establish consistent patterns for how you use sections across your POS UI extension. Similar types of content should be structured similarly, helping users develop familiarity with your interface organization.
  • Consider visual hierarchy and spacing: Use sections strategically to create clear visual hierarchy in your interface.

Anchor to LimitationsLimitations

  • Section content is determined by child components rather than direct content properties—organize your content structure through component composition.
  • Only one action button is supported per section to maintain clean, focused interfaces that integrate well with existing POS workflows.
  • The component's visual styling and layout are controlled by the POS design system—custom section styling beyond the provided properties is not supported.
Was this page helpful?