List

Lists display a set of related content. Each list item usually begins with a bullet or a number.

string

A label that describes the purpose or contents of the list. When set, it will be announced to buyers using assistive technologies and will provide them with more context.

string

A unique identifier for the component.

Default: 'bullet'

Type of marker to display

<
>
Default: 'base'

Adjust spacing between list items

Was this section helpful?
Basic List
Copy
import {
reactExtension,
List,
ListItem,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
return (
<List>
<ListItem>100% organic cotton</ListItem>
<ListItem>Made in Canada</ListItem>
<ListItem>Machine washable</ListItem>
</List>
);
}

Preview
  • Use lists to break up chunks of related content to make the information easier for customers to scan.

  • Phrase list items consistently. Try to start each item with a noun or a verb and be consistent with each item.

  • Use bullets for a text-only list of related items that don’t need to be in a specific order.

  • Use numbers for a text-only list of related items when you need to communicate order, priority, or sequence.

  • Don’t use a marker when only the semantic value of a list matters, such as with a list of links.

Was this section helpful?