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-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
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.