CardSection

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

CardSections are used to group similar concepts within a Card. CardSections add dividers, which visually separate regions within cards.

import {extend, Card, CardSection} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const card = root.createComponent(Card, {});

root.appendChild(card);

const cardSection = root.createComponent(CardSection, {

title: 'Sectional',

});

cardSection.appendChild('This is the best section.');

card.appendChild(cardSection);

const cardSection2 = root.createComponent(CardSection, {

title: 'Loveseat',

});

cardSection.appendChild('No, this is the best section.');

card.appendChild(cardSection2);

root.mount();

});

import React from 'react';

import {extend, render, Card, CardSection} from '@shopify/admin-ui-extensions-react';

function App() {

return (

<Card>

<CardSection title="Sectional">This is the best section.</CardSection>

<CardSection title="Loveseat">No, this is the best section.</CardSection>

</Card>

);

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Card, CardSection} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const card = root.createComponent(Card, {});
  root.appendChild(card);

  const cardSection = root.createComponent(CardSection, {
    title: 'Sectional',
  });
  cardSection.appendChild('This is the best section.');
  card.appendChild(cardSection);

  const cardSection2 = root.createComponent(CardSection, {
    title: 'Loveseat',
  });
  cardSection.appendChild('No, this is the best section.');
  card.appendChild(cardSection2);

  root.mount();
});

import React from 'react';
import {extend, render, Card, CardSection} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Card>
      <CardSection title="Sectional">This is the best section.</CardSection>
      <CardSection title="Loveseat">No, this is the best section.</CardSection>
    </Card>
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
title?	`string`

Anchor to GuidelinesGuidelines

✅ Do	🛑 Don't
Use CardSection to split up content within Card	Use CardSection outside of Card

Was this page helpful?