Agent skill · software engineering · jeremylongshore
shopify-checkout-extensions
Build Checkout UI Extensions to customize Shopify checkout with sandboxed
Why this skill is useful
Provides specific implementation patterns and component usage for building Shopify checkout UI extensions that the AI wouldn't reliably generate on its own.
What it needs
Requires node, shopify-cli installed locally. Requires shopify account access. About 2k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Shopify Checkout UI Extensions Overview Checkout UI Extensions replace checkout.liquid (deprecated August 2025) with sandboxed, React-like components at specific checkout targets. They run in isolation with no DOM access and a strict 64KB bundle limit, using Shopify's component library for consistent, accessible UIs. Prerequisites Shopify CLI 3.x+ and a Shopify Partners app Node.js 18+, @shopify/ui-extensions-react package Development store with checkout extensibility enabled Instructions Step 1: Configure the Extension Step 2: Build with UI Components Step 3: Read Checkout Data with Hooks Step 4: Bundle Size Strategies See extension-targets.md for all targets, ui-components.md for components, and bundle-optimization.md for size strategies. Output Checkout UI extension rendering at the configured target point Custom data collection via metafield writes from checkout Merchant-configurable settings via the extension editor Sandboxed execution with no impact on checkout performance Error Handling Error Cause Solution ------- ------- ---------- EXTENSIONLOADFAILED Bundle exceeds 64KB or invalid code Tree-shake deps; check size with --verbose Sandbox violation DOM access, fetch, or window usage Use only Shopify components and hooks CHECKOUTCOMPLETIONBLOCKED Extension error with blockprogress Add try/catch; test all edge cases Target not rendering Wrong target or not enabled Verify target in TOML; check admin placement Examples Adding a Custom Field to Checkout Collect delivery instructions or gift messages by rendering a text input at a specific checkout target and saving the value as a cart metafield. See Extension Targets for all available targets and placement options. Building a Reusable Checkout Banner Create a merchant-configurable promotional banner using Shopify's UI component library with proper accessibility. See UI Components for available components and their key props. Optimizing Extension Bundle Size Your checkout extension is approaching the 64KB limit. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/shopify-checkout-extensions