--- title: List description: >- Lists display a set of related content. Each list item usually begins with a bullet or a number. api_version: 2025-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/list md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/list.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/upgrading-to-2026-04) to upgrade your extension. # List Lists display a set of related content. Each list item usually begins with a bullet or a number. ### Support Targets (50) ### Supported targets * Checkout::Actions::Render​Before * Checkout::Cart​Line​Details::Render​After * Checkout::Cart​Lines::Render​After * Checkout::Contact::Render​After * Checkout::Customer​Information::Render​After * Checkout::Delivery​Address::Render​Before * Checkout::Dynamic::Render * Checkout::Pickup​Locations::Render​After * Checkout::Pickup​Locations::Render​Before * Checkout::Pickup​Points::Render​After * Checkout::Pickup​Points::Render​Before * Checkout::Reductions::Render​After * Checkout::Reductions::Render​Before * Checkout::Shipping​Method​Details::Render​After * Checkout::Shipping​Method​Details::Render​Expanded * Checkout::Shipping​Methods::Render​After * Checkout::Shipping​Methods::Render​Before * Checkout::Thank​You::Cart​Line​Details::Render​After * Checkout::Thank​You::Cart​Lines::Render​After * Checkout::Thank​You::Customer​Information::Render​After * Checkout::Thank​You::Dynamic::Render * purchase.​checkout.​actions.​render-before * purchase.​checkout.​block.​render * purchase.​checkout.​cart-line-item.​render-after * purchase.​checkout.​cart-line-list.​render-after * purchase.​checkout.​contact.​render-after * purchase.​checkout.​delivery-address.​render-after * purchase.​checkout.​delivery-address.​render-before * purchase.​checkout.​footer.​render-after * purchase.​checkout.​header.​render-after * purchase.​checkout.​payment-method-list.​render-after * purchase.​checkout.​payment-method-list.​render-before * purchase.​checkout.​pickup-location-list.​render-after * purchase.​checkout.​pickup-location-list.​render-before * purchase.​checkout.​pickup-location-option-item.​render-after * purchase.​checkout.​pickup-point-list.​render-after * purchase.​checkout.​pickup-point-list.​render-before * purchase.​checkout.​reductions.​render-after * purchase.​checkout.​reductions.​render-before * purchase.​checkout.​shipping-option-item.​details.​render * purchase.​checkout.​shipping-option-item.​render-after * purchase.​checkout.​shipping-option-list.​render-after * purchase.​checkout.​shipping-option-list.​render-before * purchase.​thank-you.​announcement.​render * purchase.​thank-you.​block.​render * purchase.​thank-you.​cart-line-item.​render-after * purchase.​thank-you.​cart-line-list.​render-after * purchase.​thank-you.​customer-information.​render-after * purchase.​thank-you.​footer.​render-after * purchase.​thank-you.​header.​render-after ## ListProps * **accessibilityLabel** **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. * **id** **string** A unique identifier for the component. * **marker** **Marker** **Default: 'bullet'** Type of marker to display * **spacing** **MaybeResponsiveConditionalStyle\** **Default: 'base'** Adjust spacing between list items ### Marker ```ts 'none' | 'bullet' | 'number' ``` ### MaybeResponsiveConditionalStyle A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. To learn more check out the \[conditional styles]\(/api/checkout-ui-extensions/components/utilities/stylehelper) documentation. ```ts T | ConditionalStyle ``` ### ConditionalStyle * conditionals An array of conditional values. ```ts ConditionalValue[] ``` * default The default value applied when none of the conditional values specified in \`conditionals\` are met. ```ts T ``` ### ConditionalValue * conditions The conditions that must be met for the value to be applied. At least one condition must be specified. ```ts AcceptedConditions ``` * value The value that will be applied if the conditions are met. ```ts T ``` ### ViewportSizeCondition * viewportInlineSize ```ts { min: T; } ``` ### Spacing ```ts 'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose' ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/list-default-ezW69bw9.png) ### Examples * #### Basic List ##### React ```tsx import { reactExtension, List, ListItem, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( 100% organic cotton Made in Canada Machine washable ); } ``` ##### JS ```js import {extension, List, ListItem} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const list = root.createComponent(List, undefined, [ root.createComponent(ListItem, undefined, '100% organic cotton'), root.createComponent(ListItem, undefined, 'Made in Canada'), root.createComponent(ListItem, undefined, 'Machine washable'), ]); root.appendChild(list); }); ``` ## Best Practices * 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. ## Related [Component - ListItem](listItem)