Checkout UI extensions

Checkout UI extensions let app developers build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay.

Shopify Plus

Checkout UI extensions for the information, shipping and payment step are available only to stores on a Shopify Plus plan.

Choose a version:

Anchor to scaffolding-extensionScaffolding an extension

Use the Shopify CLI to generate a new extension in the directory of your app.

Scaffolding

CLI

# create an app if you don't already have one:

shopify app init --name my-app

# navigate to your app's root directory:

cd my-app

# generate a new extension:

POLARIS_UNIFIED=true shopify app generate extension

# follow the steps to create a new

# extension in ./extensions.

Examples

Scaffolding

CLI

# create an app if you don't already have one:
shopify app init --name my-app

# navigate to your app's root directory:
cd my-app

# generate a new extension:
POLARIS_UNIFIED=true shopify app generate extension

# follow the steps to create a new
# extension in ./extensions.

Anchor to scaffolded-with-preactScaffolded with Preact

UI Extensions are scaffolded with Preact by default. This means that you can use Preact patterns and principles within your extension.

Scaffolded with Preact

JSX

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

import {useState} from 'preact/hooks';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

const [count, setCount] = useState(0);

return (

<s-text>Count: {count}</s-text>

<s-button

onClick={() => setCount(count + 1)}

Increment

</s-button>

</>

);

}

Examples

Scaffolded with Preact

JSX

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [count, setCount] = useState(0);

  return (
    <>
      <s-text>Count: {count}</s-text>
      <s-button
        onClick={() => setCount(count + 1)}
      >
        Increment
      </s-button>
    </>
  );
}

Anchor to extension-targetsExtension Targets

Extension targets provide locations where merchants can insert custom content. Static extension targets are tied to core checkout features like contact information, shipping methods, and order summary line items. Block extension targets can be displayed at any point in the checkout process and will always render regardless of which checkout features are available. An example is a field to capture order notes from the customer.

Extension UIs are rendered using remote DOM, a fast and secure environment for custom (non-DOM) UIs.

OverviewExtension targets

Extension targets

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

return <s-banner>Your extension</s-banner>;

}

Examples

Extension targets

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-banner>Your extension</s-banner>;
}

Anchor to configuration-fileConfiguration file

When you create a checkout UI extension, the shopify.extension.toml file is automatically generated in your checkout UI extension directory. It contains the extension's configuration, which includes the extension name, extension targets, metafields, capabilities, and settings definition.

Learn moreConfiguration guide

Shopify.extension.toml

toml

api_version = "2025-10"

[[extensions]]

type = "ui_extension"

name = "My checkout extension"

handle = "checkout-ui"

[[extensions.targeting]]

target = "purchase.checkout.block.render"

module = "./Checkout.jsx"

Examples

shopify.extension.toml

toml

api_version = "2025-10"

[[extensions]]
type = "ui_extension"
name = "My checkout extension"
handle = "checkout-ui"

  [[extensions.targeting]]
  target = "purchase.checkout.block.render"
  module = "./Checkout.jsx"

Anchor to extension-apisExtension 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.

API referenceCheckout extensions API

Extension APIs

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

if (

shopify.shippingAddress.value?.countryCode !==

'CA'

) {

return (

<s-banner>

Sorry, we can only ship to Canada at this

time

</s-banner>

);

}

Examples

Extension APIs

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  if (
    shopify.shippingAddress.value?.countryCode !==
    'CA'
  ) {
    return (
      <s-banner>
        Sorry, we can only ship to Canada at this
        time
      </s-banner>
    );
  }
}

Anchor to ui-componentsUI components

Checkout UI extensions declare their interface using supported UI components. Shopify renders the UI natively, so it's performant, accessible, and works in all of checkout's supported browsers.

Checkout components are designed to be flexible, enabling you to layer and mix them to create highly-customized app extensions that feel seamless within the checkout experience. All components inherit a merchant's brand settings and the CSS cannot be altered or overridden.

API referenceComponent library

UI ReferenceFigma UI kit

UI components

Preact

import '@shopify/ui-extensions/preact';

import {render} from 'preact';

export default function extension() {

render(<Extension />, document.body);

}

function Extension() {

return (

<s-stack direction="inline">

<s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" />

<s-stack>

<s-heading>Heading</s-heading>

<s-text type="small">Description</s-text>

</s-stack>

<s-button

onClick={() => {

console.log('button was pressed');

}}

Button

</s-button>

</s-stack>

);

}

Examples

UI components

Preact

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-stack direction="inline">
      <s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" />
      <s-stack>
        <s-heading>Heading</s-heading>
        <s-text type="small">Description</s-text>
      </s-stack>
      <s-button
        onClick={() => {
          console.log('button was pressed');
        }}
      >
        Button
      </s-button>
    </s-stack>
  );
}

Anchor to securitySecurity

Checkout UI extensions are a safe and secure way to customize the appearance and functionality of the checkout page without compromising the security of checkout or customer data.

They run in an isolated sandbox, separate from the checkout page and other UI extensions.
They don't have access to sensitive payment information or the checkout page itself (HTML or other assets).
They are limited to specific UI components and APIs that are exposed by the platform.
They have limited access to global web APIs.
Apps that wish to access protected customer data, must submit an application and are subject to strict security guidelines and review proccesses by Shopify.

Constraints

You can't override the CSS for UI components. The checkout UI will always render the merchant's own branding as shown in the image in the UI components section above.

Checkout UI extensions don't have access to the real checkout DOM and can't render arbitrary HTML such as <div> elements or <script> tags, etc. They can only render custom HTML elements provided by Shopify.