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

# extensions/checkout-banner/shopify.extension.toml
api_version = "2025-01"
type = "ui_extension"