Checkout UI extensions overview
Checkout UI extensions let app developers build custom functionality that merchants can install at defined points in the checkout flow.
Shopify provides different types of extension points, APIs, and components to extend checkout and build custom functionality. For example, app developers can create extensions for custom fields and product offers that render directly in the checkout flow.
Extension points adapt when checkout flows adapt, like between guest checkout and Shop Pay.
Extension points
Anchor link to section titled "Extension points"| Static extension points | Dynamic extension points | |
|---|---|---|
| Example |  |
 |
| Description |
Static extension points are tied to core checkout features such as contact information, shipping methods, and order summary line items. Shopify provides extension points that render extensions before or after most core checkout features. When a core checkout feature isn't rendered, the static extension points tied to the feature aren't rendered. For example, shipping methods aren't shown when customers select the option for store pickup and the UI extensions that load in the static extension points before or after the shipping method aren't rendered. You can either use one static extension point, or offer merchants a choice of different static extension points for your extension. Merchants use the checkout editor to activate and place the extension in the checkout experience. The extension won't show up in checkout until merchants use the checkout editor to add the app and place the extension in checkout. |
Dynamic extension points aren't tied to core checkout features. They render between core features on each checkout step. Merchants can use the checkout editor to place the extension in any one of the supported locations for the dynamic extension point. When a checkout step doesn't display, dynamic extension points automatically move, such as when shipping options are not shown in a checkout for digital products. |
| Use case |
Choose static extension points when your content and functionality is closely related to a core checkout feature. An example is a shipping delay notice. |
Choose dynamic extension points when your content and functionality is self-contained and can display at any step in the checkout process. An example is a field to capture order notes from the customer. |
Supported locations
Anchor link to section titled "Supported locations"The following diagrams show the supported locations for static and dynamic extension points:
Extension APIs
Anchor link to section titled "Extension APIs"APIs enable checkout UI extensions to get information about the checkout or related objects and to perform actions. For example, you can use the APIs to retrieve what's in customer carts so that you can offer related products.
Extensions use JavaScript to read and write data and call external services, and natively render UIs built using Shopify's checkout components.
Extension components
Anchor link to section titled "Extension components"Checkout UI components make your extensions feel cohesive across checkouts. For example, checkout UI components automatically inherit a merchant's brand settings.
Extension localization
Anchor link to section titled "Extension localization"Localization is the process of adapting content to meet the language and cultural requirements of a specific country or region. You can use JavaScript APIs to access translations and localize UI extensions for international merchants and customers.
Rendering environment
Anchor link to section titled "Rendering environment"Extension UIs are rendered using remote UI, a fast and secure environment for custom (non-DOM) UIs.
Limitations
Anchor link to section titled "Limitations"Checkout UI extensions don't have access to the DOM and can't return DOM nodes. They can't return <div> elements, for example. Building an arbitrary tree of HTML and loading additional scripts using script tags are also not supported.
Learn more about the following resources for building checkout UI extensions: