Divider

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Separate content sectionsSeparate content sections

Separate a sync status summary from a recent changes list with a horizontal rule. This example places a Divider between two sections, each with its own Heading and detail text.

Separate content sections

Separate content sections

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import {reactExtension, Divider, Heading, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

return (

<BlockStack>

<Heading>Sync status</Heading>

<Text>Last synced 5 minutes ago — all fields up to date.</Text>

<Divider />

<Heading size={3}>Recent changes</Heading>

<Text>3 metafields updated, 1 tag added in the last 24 hours.</Text>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.block.render',

() => <App />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

import {extension, Divider, Heading, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.block.render',

(root) => {

const stack = root.createComponent(BlockStack);

const title = root.createComponent(Heading, {}, 'Sync status');

const status = root.createComponent(Text, {}, 'Last synced 5 minutes ago — all fields up to date.');

const divider = root.createComponent(Divider);

const historyTitle = root.createComponent(Heading, {size: 3}, 'Recent changes');

const history = root.createComponent(Text, {}, '3 metafields updated, 1 tag added in the last 24 hours.');

stack.appendChild(title);

stack.appendChild(status);

stack.appendChild(divider);

stack.appendChild(historyTitle);

stack.appendChild(history);

root.appendChild(stack);

},

);

React

import {reactExtension, Divider, Heading, Text, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <Heading>Sync status</Heading>
      <Text>Last synced 5 minutes ago — all fields up to date.</Text>
      <Divider />
      <Heading size={3}>Recent changes</Heading>
      <Text>3 metafields updated, 1 tag added in the last 24 hours.</Text>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

TS

import {extension, Divider, Heading, Text, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const title = root.createComponent(Heading, {}, 'Sync status');
    const status = root.createComponent(Text, {}, 'Last synced 5 minutes ago — all fields up to date.');

    const divider = root.createComponent(Divider);

    const historyTitle = root.createComponent(Heading, {size: 3}, 'Recent changes');
    const history = root.createComponent(Text, {}, '3 metafields updated, 1 tag added in the last 24 hours.');

    stack.appendChild(title);
    stack.appendChild(status);
    stack.appendChild(divider);
    stack.appendChild(historyTitle);
    stack.appendChild(history);
    root.appendChild(stack);
  },
);

import {reactExtension, Divider, Text, InlineStack, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <InlineStack>
        <Text fontWeight="bold">$49.99</Text>
        <Divider direction="block" />
        <Text>SKU: WH-1234</Text>
      </InlineStack>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

import {extension, Divider, Text, InlineStack, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const row = root.createComponent(InlineStack);

    const price = root.createComponent(
      Text,
      {fontWeight: 'bold'},
      '$49.99',
    );

    const divider = root.createComponent(Divider, {
      direction: 'block',
    });

    const sku = root.createComponent(Text, {}, 'SKU: WH-1234');

    row.appendChild(price);
    row.appendChild(divider);
    row.appendChild(sku);

    stack.appendChild(row);
    root.appendChild(stack);
  },
);

import {reactExtension, Divider, TextField, Heading, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {

  return (
    <BlockStack>
      <Heading>Shipping details</Heading>
      <TextField label="Weight (kg)" name="weight" />
      <TextField label="Dimensions (L×W×H cm)" name="dimensions" />
      <Divider />
      <Heading>Customs information</Heading>
      <TextField label="HS tariff code" name="hsCode" />
      <TextField label="Country of origin" name="countryOfOrigin" />
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

import {extension, Divider, TextField, Heading, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const shippingTitle = root.createComponent(Heading, {}, 'Shipping details');
    const weightField = root.createComponent(TextField, {
      label: 'Weight (kg)',
      name: 'weight',
    });
    const dimensionsField = root.createComponent(TextField, {
      label: 'Dimensions (L×W×H cm)',
      name: 'dimensions',
    });

    const divider = root.createComponent(Divider);

    const customsTitle = root.createComponent(Heading, {}, 'Customs information');
    const hsCodeField = root.createComponent(TextField, {
      label: 'HS tariff code',
      name: 'hsCode',
    });
    const originField = root.createComponent(TextField, {
      label: 'Country of origin',
      name: 'countryOfOrigin',
    });

    stack.appendChild(shippingTitle);
    stack.appendChild(weightField);
    stack.appendChild(dimensionsField);
    stack.appendChild(divider);
    stack.appendChild(customsTitle);
    stack.appendChild(hsCodeField);
    stack.appendChild(originField);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

• Use dividers to separate distinct groups: Place a Divider between logical groups of content to help merchants scan and distinguish between sections.
• Don't overuse dividers: Too many dividers can make the interface feel cluttered. Consider using spacing (using BlockStack or InlineStack) instead of dividers when a subtle separation is sufficient.
• Use Section for semantic separation: If the content groups have headings or represent distinct sections, use Section components instead of Divider. Divider is purely visual and doesn't convey semantic meaning.

Anchor to LimitationsLimitations

• Divider doesn't accept children. It renders as a self-contained line element.
• The visual style (color, thickness, style) of the divider is controlled by Shopify and can't be customized. It always renders as a standard admin divider line.
• Divider doesn't add any spacing around itself. Place it inside a layout container with appropriate spacing to control the gap between the divider and adjacent content.