TechPrufer
Sign inGet started

Blogs›Shopify›Checkout UI Extension Modernization

Checkout UI Extension Modernization

Checkout UI Extension Modernization

1
posts
2026

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 to meet strict bundle size constraints.

2026

Upgrading Checkout Blocks app to Polaris web components (2026) - Shopify

7/16/2026

This post details the upgrade of Checkout Blocks UI extensions to use Preact and Polaris web components with remote-dom, migrating from React and legacy Remote UI bridge. The upgrade involved rewriting code to TypeScript, replacing large libraries like liquidjs with a custom 'droplet' parser and dayjs with an in-house date utility, and aliasing markdown-to-jsx onto Preact. The process was incremental, starting with the smallest extension and gradually migrating others. A key challenge was meeting the 64KB gzip bundle size limit, achieved by dropping react-reconciler and optimizing other dependencies. The post also highlights bugs found and fixed in the platform during this upgrade, including an ID collision issue.