Version 2025-07 is the last API version to support React-based UI components. Later versions use Polaris web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the upgrade guide to upgrade your extension and avoid being blocked from updating your extension after October 1st 2026.
List
Lists display a set of related content. Each list item usually begins with a bullet or a number.
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
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
Anchor to ListPropsList
Lists display a set of related content. Each list item usually begins with a bullet or a number.
- Anchor to accessibilityLabelaccessibility
Labelaccessibility Label stringstring 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.
- Anchor to idididstringstring
A unique identifier for the component.
- Anchor to markermarkermarkerMarkerMarkerDefault: 'bullet'Default: 'bullet'
Type of marker to display
- Anchor to spacingspacingspacingMaybeResponsiveConditionalStyle<Spacing>MaybeResponsiveConditionalStyle<Spacing>Default: 'base'Default: 'base'
Adjust spacing between list items
Marker
'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.
T | ConditionalStyle<T, ViewportSizeCondition>ConditionalStyle
A conditional style definition that maps one or more conditions to different values. The `default` value is used as a fallback when none of the conditions in `conditionals` are satisfied.
- conditionals
An array of conditional values.
ConditionalValue<T, AcceptedConditions>[] - default
The default value applied when none of the conditional values specified in `conditionals` are met.
T
ConditionalValue
A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met.
- conditions
The conditions that must be met for the value to be applied. At least one condition must be specified.
AcceptedConditions - value
The value that will be applied if the conditions are met.
T
ViewportSizeCondition
A condition that targets layouts based on the inline size (width in horizontal writing modes) of the viewport.
- viewportInlineSize
The minimum viewport inline size that the condition must match.
{ min: T; }
Spacing
A keyword that maps to a predefined spacing value from the design system. Use these instead of pixel values to ensure consistent spacing throughout the UI. - `none`: No spacing (0px). - `extraTight`: The smallest amount of spacing. - `tight`: A compact amount of spacing, suitable for tight layouts. - `base`: The default spacing, appropriate for most layouts. - `loose`: A generous amount of spacing, used to create visual separation. - `extraLoose`: The largest amount of spacing.
'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'Anchor to ExamplesExamples
Anchor to Basic ListBasic List
Basic List
Basic List
React
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>
);
}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);
});Anchor to Best practicesBest practices
-
Use lists to break up chunks of related content to make the information easier for buyers 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.
