Shopify Checkout Extensibility: Complete Guide for 2026

Shopify processes over 235 billion dollars in annual GMV through its checkout. With the deprecation of checkout.liquid and the full rollout of Checkout Extensibility, every Shopify merchant needs to understand how the new system works, what it enables, and how to migrate without losing conversions.

This guide covers every major component of Shopify Checkout Extensibility: UI extensions, Shopify Functions, the Branding API, checkout blocks, payment and shipping customization, and the strategies that turn checkout into a competitive advantage.

Key Takeaways

• Checkout Extensibility replaces checkout.liquid with a secure, upgrade-safe architecture built on UI extensions and Shopify Functions
• Checkout UI extensions run in a sandboxed environment using React-based components rendered through checkout targets
• Shopify Functions let you customize discount logic, payment method filtering, and shipping rate manipulation server-side without external API calls
• The Checkout Branding API provides granular control over colors, typography, spacing, and layout without touching extension code
• Migration from checkout.liquid is mandatory for Shopify Plus merchants and should be planned systematically to avoid conversion drops
• Custom checkout flows can increase conversion rates by 8-15% when implemented with proper UX testing

What Is Checkout Extensibility?

Checkout Extensibility is the Shopify framework for customizing the checkout experience. It replaces the legacy checkout.liquid approach with a system designed around three pillars:

1. Checkout UI Extensions --- React-based components that render in specific locations within the checkout flow
2. Shopify Functions --- Server-side logic that runs within Shopify infrastructure to customize business rules
3. Checkout Branding API --- A GraphQL API for controlling the visual appearance of checkout

Unlike checkout.liquid, which gave merchants full HTML/CSS/JS control but created upgrade and security risks, Checkout Extensibility provides customization within a controlled environment that Shopify can continue to optimize.

Checkout UI Extensions

How They Work

Checkout UI extensions are built using the Shopify UI extension framework. They render inside predefined extension targets (also called extension points) within the checkout flow. Each target corresponds to a specific location: before the shipping method selector, after the order summary, inside the payment section, and so on.

Extensions use a limited set of UI components provided by Shopify:

| Component | Purpose | Common Use Cases | |-----------|---------|-----------------| | Banner | Display alerts or promotions | Free shipping thresholds, limited-time offers | | BlockStack / InlineStack | Layout containers | Organizing custom fields and content | | TextField | Text input collection | Gift messages, custom instructions | | Checkbox | Boolean selections | Newsletter signup, terms acceptance | | Select | Dropdown selections | Delivery date preferences | | Heading / Text | Typography | Section headers, helper text | | Image | Visual content | Trust badges, brand elements | | Divider | Visual separation | Section breaks |

Extension Targets in the Checkout Flow

The checkout flow offers dozens of extension targets grouped by section:

Before and after the entire checkout --- purchase.checkout.header.render-after and purchase.checkout.footer.render-after allow you to add content around the entire checkout.

Shipping address section --- Render content before or after the shipping address form with purchase.checkout.shipping-address.render-before and render-after targets.

Shipping method section --- Add banners, information, or custom UI before or after the shipping option list.

Payment method section --- Insert trust badges, payment information, or custom fields around the payment method selector.

Order summary --- Add upsells, cross-sells, or informational content alongside the cart line items and order total.

Building a Checkout UI Extension

A typical checkout UI extension project is scaffolded using the Shopify CLI with the checkout_ui extension type. The extension entry point uses the reactExtension function to register a component at a specific target location in the checkout flow.

For example, a free shipping banner extension would use the useCartLines hook to calculate the cart subtotal, compare it to your free shipping threshold, and render a Banner component showing either a success message or how much more the customer needs to add. This single extension typically increases average order value by 5-12%.

Extension API Hooks

Shopify provides a rich set of hooks for accessing checkout state:

• useCartLines() --- Access all items in the cart with prices, quantities, and product metadata
• useBuyerJourney() --- Intercept and validate checkout progression, block invalid submissions
• useShippingAddress() --- Read the shipping address for conditional logic
• useApplyDiscountCodeChange() --- Programmatically apply discount codes based on conditions
• useApplyMetafieldChange() --- Store custom data on the order for fulfillment workflows
• useExtensionApi() --- Access the full extension API including localization and session tokens

Practical Extension Examples

Gift message collection: Place a TextField component in the shipping-address.render-after target. Use useApplyMetafieldChange to store the message as an order metafield. The fulfillment team reads the metafield during packing.

Delivery date picker: Use a Select component with available dates calculated from your shipping carrier SLA data. Store the selected date as a metafield and use it for fulfillment scheduling.

Loyalty points display: Show returning customers their available loyalty points and let them apply points as a discount using useApplyDiscountCodeChange.

Shopify Functions

What Shopify Functions Replace

Before Shopify Functions, custom business logic required external API calls that added latency and failure points to checkout. Functions run directly within Shopify infrastructure, executing in under 5 milliseconds with no network overhead.

Function Types

| Function Type | What It Customizes | Example | |---------------|-------------------|---------| | Product Discount | Automatic discounts on products | Buy 2 get 1 free with complex tier logic | | Order Discount | Discounts on the entire order | Spend over threshold, save 15% with exclusions | | Shipping Discount | Discounts on shipping rates | Free shipping for loyalty members | | Payment Customization | Payment method visibility and ordering | Hide COD for high-value orders | | Delivery Customization | Shipping method names and sorting | Rename carriers, reorder by priority | | Cart Transform | Modify cart contents | Auto-bundle products, expand kits | | Fulfillment Constraints | Restrict fulfillment options | Require signature for high-value items |

How Functions Work

Functions are written in Rust (compiled to WebAssembly) or JavaScript. Each function receives an input object containing relevant checkout data and returns an operations array describing the changes to apply.

For payment customization, the function receives all available payment methods and cart data, then returns hide or reorder operations for specific methods based on your business rules. For delivery customization, functions can rename shipping options, reorder them by priority, or hide them based on cart contents or delivery address.

Function Limitations

• Execution time: 5ms maximum
• Memory: 10MB maximum
• Input size: Limited by the function input query
• No network calls: Functions cannot make HTTP requests
• No persistent state: Each invocation is stateless

These constraints are intentional. They ensure checkout performance remains consistent even with dozens of active functions.

Checkout Branding API

The Checkout Branding API provides visual customization without building extensions. It controls:

Colors --- Primary and secondary brand colors, background colors, text and link colors, and state colors for errors, success, and warnings.

Typography --- Font family from the Shopify font library or custom fonts, font sizes for headings, body, and labels, plus font weights and line heights.

Layout and spacing --- Corner radius for buttons, inputs, and containers, spacing between sections, and border styles.

Logo and favicon --- Checkout header logo with position and sizing controls.

The Branding API is accessed via the checkoutBrandingUpsert GraphQL mutation. You pass a profile and branding input object specifying your design system: color schemes, typography settings, and corner radius values. This separates visual branding from functional customization so you can update your checkout appearance without modifying extension code.

Migration from checkout.liquid

Why Migration Is Mandatory

Shopify has set firm deprecation timelines for checkout.liquid. All Shopify Plus merchants must migrate to Checkout Extensibility.

1. Security: checkout.liquid allows arbitrary JavaScript execution in the checkout, creating XSS and data exfiltration risks
2. Performance: Unoptimized checkout.liquid customizations slow down page loads
3. Upgrade path: Shopify cannot roll out checkout improvements when merchants override the entire checkout template

Migration Checklist

| checkout.liquid Feature | Checkout Extensibility Equivalent | |------------------------|----------------------------------| | Custom CSS styling | Checkout Branding API | | Trust badge images | Checkout UI extension with Image component | | Gift message field | Checkout UI extension with TextField | | Custom discount logic | Shopify Function (discount type) | | Payment method hiding | Shopify Function (payment customization) | | Shipping method renaming | Shopify Function (delivery customization) | | Order note field | Checkout UI extension with TextField + metafield | | Analytics scripts | Web Pixels (Customer Events) | | Custom validation | useBuyerJourney hook with validation logic |

Step-by-Step Migration Process

1. Audit your current checkout.liquid --- Document every customization, script, and visual change
2. Categorize each customization --- Map to UI extensions, Functions, Branding API, or Web Pixels
3. Build and test in development --- Use the Shopify CLI to test extensions locally against a development store
4. Deploy incrementally --- Enable Checkout Extensibility on a test store first, then roll out to production
5. Monitor conversion rates --- Compare checkout completion rates before and after migration for at least two weeks
6. Iterate --- Use A/B testing to optimize extension placement and messaging

Payment and Shipping Customization

Payment Customization Strategies

• Region-based payment methods: Show local payment methods (iDEAL in Netherlands, PIX in Brazil) based on shipping address
• Order value thresholds: Hide buy-now-pay-later for low-value or very high-value orders
• Customer tag filtering: Show wholesale payment terms only for tagged B2B customers
• Product-based restrictions: Disable certain payment methods for digital products or subscriptions

Shipping Customization Strategies

• Carrier renaming: Replace technical carrier names with branded names like "Fast Delivery (3-5 business days)"
• Rate sorting: Push preferred shipping methods to the top of the list
• Conditional availability: Hide express shipping for oversized items or rural addresses
• Delivery date estimation: Use delivery customization functions to display estimated delivery dates alongside each shipping option

Conversion Optimization Tips

Reduce Checkout Friction

• Use address autocomplete (built into Shopify checkout) and ensure it works for all target markets
• Enable Shop Pay for returning customers --- it reduces checkout time by up to 4x
• Minimize the number of custom fields; each additional field reduces completion rates by 3-5%

Build Trust at Checkout

• Place security badges and trust signals in the checkout footer area
• Show clear return policy summaries near the payment section
• Display customer review counts or satisfaction ratings

Leverage Post-Purchase Extensions

• Use the thank-you page render target for upsell offers
• Show subscription signup prompts on the order confirmation page
• Collect NPS feedback immediately after purchase

Frequently Asked Questions

Is Checkout Extensibility available on all Shopify plans?

Checkout UI extensions and Shopify Functions are available on all Shopify plans. However, some advanced features like full checkout branding customization are limited to Shopify Plus. Basic branding (colors and fonts) is available on all plans through the theme editor.

Will my checkout.liquid customizations stop working?

Yes. Shopify has set deprecation timelines for checkout.liquid. Shopify Plus merchants who have not migrated will be automatically transitioned to the default checkout experience. Plan your migration now to maintain control over your checkout.

Can I use third-party JavaScript in Checkout Extensibility?

No. Checkout UI extensions run in a sandboxed environment and cannot load external scripts. This is a security measure. If you need external service integration, use Shopify Functions for server-side logic or Web Pixels for analytics tracking.

How do Shopify Functions affect checkout speed?

Shopify Functions execute in under 5 milliseconds within Shopify infrastructure. They are significantly faster than the external API calls they replace. Most merchants see checkout performance improvements after migrating from scripts to Functions.

Can I roll back to checkout.liquid after migrating?

During the migration period, you can switch between checkout.liquid and Checkout Extensibility in your store settings. However, once Shopify fully deprecates checkout.liquid for your store, rollback will no longer be possible.

Transform Your Shopify Checkout

Checkout Extensibility represents the future of Shopify commerce. Whether you need to migrate from checkout.liquid, build custom checkout flows, or optimize your conversion rates, the new framework provides the tools to create a checkout experience that matches your brand and business requirements.

ECOSIRE specializes in Shopify store setup, custom theme development, and conversion optimization. For advanced checkout customization on Shopify Plus, explore our Shopify Plus services.

Ready to upgrade your checkout experience? Contact our Shopify specialists to discuss your checkout extensibility project.