Help us improve
Share bugs, ideas, or general feedback.
From shopify-commerce
Builds Shopify checkout UI extensions with Preact/Remote DOM rendering, UI primitives, extension targets, checkout APIs, metafield access, post-purchase extensions, and thank-you page customization. Use for customizing Shopify checkout.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin shopify-commerceHow this skill is triggered — by the user, by Claude, or both
Slash command
/shopify-commerce:shopify-checkout-uiThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Builds Shopify Checkout UI Extensions with Polaris for custom merchant functionality at checkout points like product info, shipping, payment, order summary, Shop Pay. Includes CLI scaffolding.
Builds Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. Includes CLI commands, access scopes, and GraphQL queries for products/orders.
Builds and debugs Shopify themes with Liquid, develops custom apps, and implements headless storefronts via Storefront API. Invoke for Shopify theme, app, or checkout customization.
Share bugs, ideas, or general feedback.
Fetch live docs:
https://shopify.dev/docs/apps/build/checkout for checkout extensionssite:shopify.dev checkout ui extension targets for available targetssite:shopify.dev checkout ui components for UI primitivesClient-side extensions that add UI to Shopify's checkout:
Important: You cannot replace Shopify's checkout — only extend it at designated points.
Locations where extensions can render:
purchase.checkout.block.render — general block in checkoutpurchase.checkout.header.render-after — after checkout headerpurchase.checkout.footer.render-after — after checkout footerpurchase.checkout.contact.render-after — after contact infopurchase.checkout.shipping-option-list.render-after — after shipping optionspurchase.checkout.payment-method-list.render-after — after payment methodspurchase.checkout.actions.render-before — before pay buttonpurchase.thank-you.block.render — block on thank-you pagecustomer-account.order-status.block.render — block on order statuspurchase.post-purchase.render — full-page post-purchase upsellpurchase.post-purchase.should-render — decide whether to show post-purchaseCheckout extensions use Shopify's UI components (NOT Polaris, NOT HTML):
| Component | Purpose |
|---|---|
Banner | Information/warning/error messages |
BlockStack | Vertical layout |
Button | Action buttons |
Checkbox | Boolean input |
ChoiceList | Radio/checkbox groups |
Divider | Visual separator |
Form | Form container |
Heading | Section headings |
Icon | Icons |
Image | Images |
InlineStack | Horizontal layout |
Link | Navigation links |
Select | Dropdown selection |
Text | Text content |
TextBlock | Block of text |
TextField | Text input |
extensions/checkout-ui/
├── src/
│ └── Checkout.tsx # Extension component
├── shopify.extension.toml # Configuration
├── locales/
│ └── en.default.json # Translations
└── package.json
api_version = "2025-01"
[[extensions]]
name = "Custom Checkout Banner"
handle = "custom-checkout-banner"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.block.render"
import {
Banner,
useExtensionApi,
useCartLines,
useApplyCartLinesChange,
reactExtension,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <CheckoutBanner />,
);
function CheckoutBanner() {
const { extension } = useExtensionApi();
const cartLines = useCartLines();
const applyCartLinesChange = useApplyCartLinesChange();
const itemCount = cartLines.reduce((sum, line) => sum + line.quantity, 0);
if (itemCount < 3) {
return (
<Banner status="info">
Add {3 - itemCount} more item(s) for free shipping!
</Banner>
);
}
return null;
}
| Hook | Purpose |
|---|---|
useCartLines() | Current cart line items |
useApplyCartLinesChange() | Modify cart lines |
useShippingAddress() | Shipping address |
useBuyerJourney() | Intercept checkout progression |
useAppMetafields() | Read app metafields |
useCheckoutToken() | Checkout session token |
useCurrency() | Current currency |
useLocalizationCountry() | Customer country |
useExtensionApi() | Full extension API |
useBuyerJourney() to validate before checkout progressionshopify app dev and a development store checkoutFetch the Shopify checkout UI extensions docs for exact component APIs, available hooks, and extension target names before implementing.