TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Checkout UI Extension Modernization

1 post · Nov 2021 – Jul 2026

What this trail covers

Shopify is migrating its UI extension surface to remote-dom with Polaris web components, moving away from legacy React components and APIs. This involves upgrading extensions to newer API versions, adopting Preact for rendering, and rewriting codebases to TypeScript. The goal is to reduce bundle sizes, improve load performance, and ensure compatibility with future platform requirements. This initiative also includes developing custom, lightweight alternatives for large libraries like Liquid.js and dayjs.

All Shopify trails
  1. Upgrading Checkout Blocks app to Polaris web components (2026) - ShopifyThis post details the migration of Checkout Blocks UI extensions from React/JSX and legacy Remote UI to Preact/TypeScript and remote-dom with Polaris web components. It highlights the reduction in bundle size (40-85%) and load times (ELT P50 -8%, P90 -7%) achieved by switching to Preact, adopting TypeScript, and replacing large libraries like liquidjs with a custom parser ('droplet') and dayjs with an in-house utility. The post also discusses the incremental upgrade strategy, the challenges of meeting the 64KB gzip bundle size limit, and the discovery and upstreaming of platform bugs.
  2. Remote rendering: Shopify’s take on extensible UI - ShopifyThis post introduces and details Shopify's 'remote rendering' technique and the associated 'remote-ui' library. It explains how extensions define UI in a sandbox and communicate with a host application via message passing (RPC) to render native components. Key components discussed include `@remote-ui/rpc` for function passing, `RemoteRoot` for defining UI trees, `RemoteReceiver` for reconstructing them, and `DomReceiver` and `@remote-ui/react` for integrating with DOM and React hosts respectively. The post also covers the role of sandboxing for secure extension execution.