Episode 4
Checkout Extensibility in 2026: What Every Shopify Developer Must Know
Shopify's checkout is the highest-converting page on the internet. Checkout Extensibility gives developers access to it for the first time — with strict rules. Here's exactly how it works, what you can build, and what will get your app rejected.
56:20·Guest: Dev Krishnamurthy — Lead Developer Advocate, Checkout Labs (Shopify App Partner)·Host: Ivan P.
Details
- Why Shopify killed checkout.liquid for Plus stores and what Checkout Extensibility replaces it with.
- The three primitives of Checkout Extensibility: UI extensions, Post-purchase extensions, and Checkout Functions.
- Checkout UI extensions: what targets are available, what React subset you have, and what you absolutely cannot do.
- The sandbox model: why your checkout extension runs in an iframe-like sandbox and how that affects state, APIs, and performance.
- Building a field validation extension: the most common first checkout extension and where developers get tripped up.
- Shopify Functions explained: server-side customization of discounts, shipping, and payment methods without an app proxy.
- The discount function deep dive: building tiered discounts, bundle discounts, and B2B-specific pricing rules that run on Shopify's infrastructure.
- Post-purchase extensions: upsell pages, NPS surveys, and loyalty enrollment that run after payment without a separate landing page.
- App review requirements for checkout extensions: what Shopify Partners review most strictly and how to avoid rejection.
- Performance requirements: the render time SLA that Checkout UI extensions must meet and how to test it.
- How to access and display Shopify metafields, cart attributes, and customer data inside a checkout extension.
- The cart transformation API: modifying line items, adding free gifts, and enforcing MOQs inside checkout without JavaScript injection.
- Building a delivery date picker in checkout: the full architecture from Shopify Function to UI extension.
- Testing checkout extensions: local dev with the CLI, staging environment setup, and load testing before app submission.
- The future of checkout extensibility: what's on the Shopify roadmap for 2026 and what patterns to build toward now.
Show Notes
- 01Checkout UI extension targets: complete list of injection points from information through thank-you page
- 02Shopify Functions: JavaScript/Wasm execution model, input/output API, and the 5ms time limit
- 03Extension sandbox: what APIs are available, what's blocked, and why — official documentation reference
- 04Discount Functions vs. Discount Codes: when to use each and the performance trade-offs
- 05Post-purchase extension anatomy: the checkout token, order data available, and how to write back to the order
- 06App review checklist for checkout extensions: the 12 criteria Shopify checks before approval
- 07Local development: shopify app dev, extension hot reload, and connecting to a development store
- 08Cart Transform API: input filter and output format for line item modification
- 09Metafield access in extensions: the metafields query shape and caching behavior in the checkout
- 10Delivery date picker reference implementation: GitHub repository and architecture walkthrough
Timestamps
0:00Dev's background: building checkout extensions since the beta program
3:30Why Shopify killed checkout.liquid and why it's actually good news
7:15The three primitives: UI extensions, Post-purchase, Functions
11:45Checkout UI extension sandbox — what you can and can't do
16:20Building your first field validation extension — live walkthrough
21:50Shopify Functions explained: server-side logic without a server
26:30Discount Functions: tiered, bundle, and B2B pricing rules
31:10Post-purchase extensions: upsells and surveys that convert
35:45App review: what gets checkout extensions rejected
40:20Cart Transform API: modifying line items inside checkout
44:55Building a delivery date picker end-to-end
49:30Testing strategy: from local dev to load testing
54:05Checkout extensibility roadmap: what's coming in 2026
Transcript
H
Ivan P.0:00
Dev, you've been building on Checkout Extensibility since the private beta. Most developers are still treating it like a mystery. Where should someone start if they've never touched it?G
Dev Krishnamurthy0:00
With the mental model. Checkout Extensibility is not the old checkout.liquid where you could inject arbitrary HTML and JavaScript. It's a strict API that runs your code in a sandboxed environment. The upside is your extension can't break checkout. The downside is there are things you literally cannot do. Understanding that boundary first saves days of frustration.H
Ivan P.11:30
Explain the sandbox. What does that actually mean in practice for a developer?G
Dev Krishnamurthy11:45
Your UI extension code runs in an isolated JS environment. No direct DOM access. No arbitrary network requests — you use the extension API to read data. No window.localStorage. The React you write is a constrained subset — no portals, no custom event listeners. In exchange, your code can't crash the checkout, can't fire unauthorized pixels, and can't add checkout latency beyond your extension's render time budget. Shopify enforces that budget and will pause your extension if you exceed it consistently.H
Ivan P.21:35
Shopify Functions are fascinating — serverless logic running on Shopify's infrastructure. What use cases actually make sense for Functions?G
Dev Krishnamurthy21:50
Anything that needs to run at checkout decision time without a round trip to your server. Discount logic: buy three get one free, tiered volume discounts, B2B company-specific pricing. Shipping: hide or rename carriers, add custom shipping methods based on cart contents. Payment: hide specific payment methods for specific customers. All of these used to require a checkout extension with API calls. Functions bring that logic server-side onto Shopify's edge — runs in under 5ms, no cold starts, no maintenance.H
Ivan P.35:30
What gets checkout extensions rejected in app review? What's the most common failure?G
Dev Krishnamurthy35:45
Performance. Extensions that render too slowly get flagged immediately. Shopify measures the render time of your extension on their infrastructure and anything that adds meaningful latency to checkout gets rejected or requires optimization before approval. The second most common rejection is external network calls from UI extensions — you have to use extension-specific APIs, not fetch. Third is trying to read or write data you're not authorized for — customer PII outside of what the checkout API exposes.Let's ship something great
Ready to hire a Shopify expert?
Get matched with a pre-vetted Shopify developer in 48 hours. 30-day guarantee.