Choose a version:

Sheet

Requires configuration of the Customer Privacy capability to be rendered.

The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to Customer Privacy API to be rendered.

The library automatically applies the WAI-ARIA Dialog pattern to both the activator and the sheet content.

Support

Targets (29)

Supported targets

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 propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose of the sheet, announced by assistive technologies. When set, screen readers will use this label instead of the heading to describe the sheet.
Anchor to defaultOpen defaultOpen boolean Default: false: Whether the sheet should be open when it first renders. Use sparingly — only when the user must interact with the sheet before proceeding (for example, a privacy consent prompt). Only takes effect on the initial render.
Anchor to heading heading string: A title that describes the content of the sheet.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide afterhide <typeof tagName>: A callback fired when the sheet is hidden, after any hide animations have completed.
Anchor to aftershow aftershow <typeof tagName>: A callback fired when the sheet is shown, after any show animations have completed.
Anchor to hide hide <typeof tagName>: A callback fired immediately after the sheet is hidden.
Anchor to show show <typeof tagName>: A callback fired immediately after the sheet is shown.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to slotsSlots

Learn more about component slots.

Anchor to primary-action primary-action HTMLElement: The main action button displayed in the sheet footer, representing the primary action users should take. Only accepts a single button component.
Anchor to secondary-actions secondary-actions HTMLElement: Additional action buttons displayed in the sheet footer, providing alternative or supporting actions.

Anchor to methodsMethods

Learn more about component methods.

Anchor to hideOverlay hideOverlay () => void required: A method to programmatically hide the overlay and run any associated hide animations.

Examples

<s-button commandFor="consent-sheet">Open Sheet</s-button>

<s-sheet id="consent-sheet" heading="Sheet" accessibilityLabel="A sheet with text content">

<s-text>Sheet Content</s-text>

</s-sheet>

Preview

Examples

Code

Default

<!-- This component requires access to Customer Privacy API to be rendered. -->
<s-button commandFor="consent-sheet">Open Sheet</s-button>
<s-sheet id="consent-sheet" heading="Sheet" accessibilityLabel="A sheet with text content">
  <s-text>Sheet Content</s-text>
</s-sheet>

Anchor to shopify-controlled-surfacesShopify-controlled surfaces

To prevent disruptions during checkout, we maintain strict design control over key areas of the Sheet component. These Shopify-controlled elements include:

Locations of elements

The Sheet elements (header, content, action buttons, and dismiss button) are strategically positioned and sized to present vital information upfront.

Padding and spacing

Maximum height

To balance customer attention and task completion, a maximum height is set for the Sheet component.

When content pushes the sheet to exceed this limit, the following UI behaviors are triggered:

Heading and content are scrollable

Expand pill appears to allow customers to view the entire content

Actions slot and dismiss button remain fixed

Anchor to privacy-consent-requirementsPrivacy consent requirements

Content

For the best customer experience, ensure content is brief and to the point.

Various strategies can be employed to avoid content scrolling.

Use short content

Use small text size

Remove the header

Actions slot

The actions slots allows customers to make decisions and is split into primary and secondary sections.

Primary section

Contains primary actions for customer decisions on the sheet's prompt. Up to two buttons are allowed. Keep the button's content brief so that it doesn't wrap to more than one line.

Secondary section

Contains action that is unrelated to the sheet's prompt. Only one button is allowed. A modal can be activated when engaging with the secondary action. Keep the button's content brief so that it doesn't wrap to more than one line.

Consent, denial of consent, and sheet dismissal

Consent

When a customer expresses consent by pressing the acceptance button, cookies will load and the sheet should not re-appear on refresh.

Denial of consent

When a customer expresses denial of consent by pressing the rejection button, cookies will not load and the sheet will not re-appear on refresh.

Sheet dismissal

When a customer neither grants nor denies consent by pressing the dismiss button, cookies will not load and the sheet will re-appear on refresh.

Was this page helpful?