Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.
ScrollView
ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so buyers can expose more content as they view.
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 ExamplesExamples
Anchor to Basic ScrollviewBasic Scrollview
Basic Scrollview
Basic Scrollview
React
import {
reactExtension,
ScrollView,
View,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return (
<ScrollView maxBlockSize={300}>
<View
border="base"
padding="base"
minBlockSize={50}
>
View
</View>
<View
border="base"
padding="base"
minBlockSize={50}
>
View
</View>
<View
border="base"
padding="base"
minBlockSize={50}
>
View
</View>
<View
border="base"
padding="base"
minBlockSize={50}
>
View
</View>
<View
border="base"
padding="base"
minBlockSize={50}
>
View
</View>
</ScrollView>
);
}JS
import {extension, ScrollView, View} from '@shopify/ui-extensions/checkout';
export default extension('purchase.checkout.block.render', (root) => {
const scrollView = root.createComponent(ScrollView, {maxBlockSize: 400}, [
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
root.createComponent(
View,
{border: 'base', padding: 'base', minBlockSize: 50},
'View',
),
]);
root.appendChild(scrollView);
});Anchor to PropertiesProperties
Anchor to scrollviewpropsScrollViewProps
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.
- Anchor to backgroundbackgroundbackgroundMaybeConditionalStyle<Background>MaybeConditionalStyle<Background>Default: 'transparent'Default: 'transparent'
The background color of the element, set using a design-system keyword.
- Anchor to borderborderborderMaybeResponsiveConditionalStyle<MaybeShorthandProperty<BorderStyle>>MaybeResponsiveConditionalStyle<MaybeShorthandProperty<BorderStyle>>
The border style of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:
'base': Appliesbaseto all edges.['base', 'none']: Block edges getbase, inline edges getnone.['base', 'none', 'dotted', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
- Anchor to borderWidthborderWidthborderWidthMaybeResponsiveConditionalStyle< MaybeShorthandProperty<BorderWidth> >MaybeResponsiveConditionalStyle< MaybeShorthandProperty<BorderWidth> >
The border width of the element. Accepts a single value for all four edges, or a shorthand tuple for per-edge control:
'base': Appliesbaseto all edges.['base', 'medium']: Block edges getbase, inline edges getmedium.['base', 'medium', 'medium', 'base']: Values apply to block-start, inline-end, block-end, and inline-start respectively.
- Anchor to cornerRadiuscornerRadiuscornerRadiusMaybeResponsiveConditionalStyle< MaybeShorthandProperty<CornerRadius> >MaybeResponsiveConditionalStyle< MaybeShorthandProperty<CornerRadius> >
The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control using logical (writing-mode-aware) corners:
'base': All four corners getbaseradius.['base', 'none']: StartStart/EndEnd getbase, StartEnd/EndStart getnone. In left-to-right mode, StartStart and EndEnd are the top-left and bottom-right corners.['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.
A
alias is available. When both are set,takes precedence.- Anchor to directiondirectiondirection'block' | 'inline''block' | 'inline'Default: blockDefault: block
The axis along which the content is scrollable.
block: Content scrolls along the main (block) axis.inline: Content scrolls along the cross (inline) axis.
- Anchor to displaydisplaydisplayMaybeResponsiveConditionalStyle<'auto' | 'none'>MaybeResponsiveConditionalStyle<'auto' | 'none'>Default: 'auto'Default: 'auto'
The display mode of the component. Learn more about
display.auto: The initial value; the actual behavior depends on the component and context.none: Hides the component and removes it from the accessibility tree.
- Anchor to hinthinthint'innerShadow' | {type: 'pill'; content: string}'innerShadow' | {type: 'pill'; content: string}
A visual hint indicating that the area is scrollable.
: An inner shadow indicating that content continues beyond the visible area.{type: 'pill', content: string}: A pill-shaped message displayed at the end of the scrollable area that disappears when the user starts scrolling.
- Anchor to idididstringstring
A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
The maximum block size (maximum height in horizontal writing modes). The element won't grow taller than this value even if its content is longer.
number: The size in pixels.`${number}%`: The size as a percentage of the parent container's block size.'fill': Takes all the available space.
Learn more about the max-block-size property.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
The maximum inline size (maximum width in horizontal writing modes). The element won't grow wider than this value.
number: The size in pixels.`${number}%`: The size as a percentage of the parent container's inline size.'fill': Takes all the available space.
Learn more about the max-inline-size property.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
The minimum block size (minimum height in horizontal writing modes). The element won't shrink smaller than this value even if its content is shorter.
number: The size in pixels.`${number}%`: The size as a percentage of the parent container's block size.'fill': Takes all the available space.
Learn more about the min-block-size property.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >MaybeResponsiveConditionalStyle< number | `${number}%` | 'fill' >
The minimum inline size (minimum width in horizontal writing modes). The element won't shrink narrower than this value.
number: The size in pixels.`${number}%`: The size as a percentage of the parent container's inline size.'fill': Takes all the available space.
Learn more about the min-inline-size property.
- Anchor to onScrollonScrollonScroll(args: ScrollViewEvent) => void(args: ScrollViewEvent) => void
A callback fired when the scroll position changes. On touch devices, this fires only when the user finishes scrolling, unlike non-touch devices where it fires continuously during scrolling.
- Anchor to onScrolledToEdgeonScrolledToEdgeonScrolledToEdge(args: ScrollViewEvent) => void(args: ScrollViewEvent) => void
A callback fired when the scroll position reaches one of the container's edges.
- Anchor to paddingpaddingpaddingMaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>MaybeResponsiveConditionalStyle<MaybeShorthandProperty<Spacing>>
The padding on all edges of the element, using a shorthand syntax. You can specify one, two, or four values following the CSS shorthand convention.
T: A single value applied uniformly to all edges.[T, T]: The first value applies to block-start and block-end, the second to inline-start and inline-end.[T, T, T, T]: Values apply to block-start, inline-end, block-end, and inline-start respectively.
- Anchor to scrollToscrollToscrollTonumber | HTMLElementnumber | HTMLElement
The initial scroll target when the component first renders. Accepts a pixel offset (
number) to scroll to a specific position, or anto scroll that element into view. This only takes effect on the first render; subsequent updates to this prop are ignored.- Anchor to borderRadiusborderRadiusborderRadiusMaybeResponsiveConditionalStyle< MaybeShorthandProperty<CornerRadius> >MaybeResponsiveConditionalStyle< MaybeShorthandProperty<CornerRadius> >deprecateddeprecated
The corner radius of the element. Accepts a single value for all four corners, or a shorthand tuple for per-corner control:
'base': All four corners getbaseradius.['base', 'none']: StartStart/EndEnd getbase, StartEnd/EndStart getnone.['base', 'none', 'small', 'base']: Values apply to StartStart, StartEnd, EndEnd, and EndStart respectively.
DeprecatedUse
instead.Deprecated:Use
instead.
MaybeConditionalStyle
A type that represents a value that can be a conditional style. We highly recommend using the `Style` helper which simplifies the creation of conditional styles.
T | ConditionalStyle<T, AcceptedConditions>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
Background
A keyword that maps to a predefined background color from the design system. - `transparent`: No background color; the parent's background shows through. - `base`: The standard surface background color. - `subdued`: A muted background color, typically used to de-emphasize content or distinguish secondary areas from the primary surface.
'transparent' | 'base' | 'subdued'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>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; }
MaybeShorthandProperty
A type that accepts either a single value applied to all edges or a shorthand tuple for per-edge control. - `T`: A single value applied uniformly to all edges. - `[T, T]`: The first value applies to block-start and block-end, the second to inline-start and inline-end. - `[T, T, T, T]`: Values apply to block-start, inline-end, block-end, and inline-start respectively.
T | ShorthandProperty<T>ShorthandProperty
A tuple type that accepts two or four values following the CSS shorthand convention for box edges. - `[T, T]`: The first value applies to block-start and block-end, the second to inline-start and inline-end. - `[T, T, T, T]`: Values apply to block-start, inline-end, block-end, and inline-start respectively.
[T, T] | [T, T, T, T]BorderStyle
A keyword that maps to a predefined border style from the design system. - `base`: A solid border line, suitable for most use cases. - `dashed`: A dashed border line, often used for drop zones or placeholder boundaries. - `dotted`: A dotted border line. - `none`: No border is rendered.
'base' | 'dashed' | 'dotted' | 'none'CornerRadius
A keyword that maps to a predefined corner radius from the design system. - `base`: The default corner radius. - `small`: A subtle corner radius, smaller than `base`. - `large`: A pronounced corner radius, larger than `base`. - `fullyRounded`: Fully rounds the corners into a pill or circle shape. - `none`: No corner rounding; sharp square corners.
'base' | 'small' | 'large' | 'fullyRounded' | 'none' | CornerRadiusDeprecatedCornerRadiusDeprecated
'tight' | 'loose'BorderWidth
A keyword that maps to a predefined border width from the design system. - `base`: The default border width. - `medium`: A medium border width, thicker than `base`. - `thick`: The thickest available border width.
'base' | 'medium' | 'thick'ScrollViewEvent
The event object passed to `onScroll` and `onScrolledToEdge` callbacks on a ScrollView.
- position
The current scroll position in pixels, broken out by axis.
{ inline: number; block: number; } - scrolledTo
Whether the scroll position has reached the start or end of each axis, or `null` if neither edge has been reached.
{ inline: "start" | "end"; block: "start" | "end"; }
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'
