Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstalliTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Shopify checkout UI extensions perform well when they render a small, self-contained interface quickly and defer nonessential work. For extensions using API version 2025-10 or later, Shopify enforces a 64 KB compressed JavaScript bundle limit per extension at deployment; the 128 KB allowance applies to full-page customer account extensions, not checkout. Existing UI extensions also needed API version 2026-01 or later to remain deployable after October 1, 2026, so teams maintaining an older version should verify and upgrade it now. Performance work must measure both when content becomes visible and when it can accept buyer input, then address network calls, initialization, rendering, and compatibility together.
What makes a checkout extension feel fast?
A buyer experiences an extension as fast when useful content appears promptly and controls become interactive without a noticeable pause. Those are separate milestones. Shopify’s checkout instrumentation exposes extension_visible for the moment content appears and extension_buyer_usable for the moment it can accept buyer input. A late visible state can compete to become the checkout’s Largest Contentful Paint (LCP) element; a long gap between visibility and usability usually indicates an interactivity problem.
Bundle size influences download and parsing time, but it does not determine the ranking by itself. A small extension that waits for an app-server request can appear after a larger extension that renders immediately. Shopify states: “Every network call your extension makes at load time adds latency before the buyer sees your UI.”
At load time, the usual causes of delay are:
- External requests that must finish before the first render.
- Expensive module-scope initialization that runs before the render callback.
- Heavy parsing, validation, or data transformation.
- Rendering work that updates parent components unnecessarily.
Use checkout APIs for checkout context whenever possible. Store app-owned data in metafields or metaobjects instead of fetching it from your server during startup. Shopify recommends the Storefront API only as a last resort for catalog data that checkout APIs do not expose. Read Preact Signals in the smallest component that needs to react; read values that do not affect the UI inside an effect or event handler so parent components do not rerender unnecessarily. See Shopify’s checkout UI extension performance guidance.
#1 Best Overall
What is the Shopify checkout extension bundle-size limit?
For UI extensions built with API version 2025-10 or later, Shopify documents a 64 KB compressed JavaScript bundle limit per extension. Shopify checks the limit when you deploy. The commonly confused 128 KB allowance is for full-page customer account extensions, not checkout extensions.
| Extension type or rule | Documented value or requirement | What it means for checkout teams |
|---|---|---|
| Checkout UI extension, API 2025-10 and later | 64 KB compressed JavaScript per extension | Every separately deployed checkout extension must fit this limit at deployment. |
| Full-page customer account extension | 128 KB compressed JavaScript | This larger allowance does not apply to checkout UI extensions. |
| Existing UI extension deployability | API 2026-01 or later after October 1, 2026 | The deadline has passed; verify the API version before maintaining or releasing an older extension. |
Shopify’s September 17, 2026 changelog explains that an exception can be requested when remaining bundle weight is unavoidable after optimization. Shopify may increase the limit, but approval is not automatic. Heavy libraries, duplicate dependencies, and translations bundled instead of using native localization APIs are cited as avoidable weight that can lead to denial. Review the bundle optimization documentation and the September 17, 2026 exception notice.
How to measure and reduce bundle weight
1. Build with a recent Shopify CLI
Shopify CLI version 3.92.0 or higher emits an esbuild metafile in each extension’s dist/ folder when you run shopify app build. The metafile shows which packages and modules account for the minified output, giving you evidence instead of guesswork.
Recommended Free Tools
- Update or confirm Shopify CLI 3.92.0 or later in the project used for the build.
- Run
shopify app build. - Open the generated metafile in each extension’s
dist/directory and identify the largest dependencies. - Record the compressed deployed size before changing code so you can verify the result.
2. Remove avoidable dependencies
Delete libraries used for work that the extension does not perform, replace duplicate utilities with one implementation, and import only the functions you use. Keep translations out of the JavaScript bundle when Shopify’s native localization APIs can provide them. Do not assume a library is acceptable because its uncompressed source looks small; the deployment check uses the compressed bundle.
3. Split capabilities and targets
Split capabilities that merchants enable independently into separate extensions or bundles. Avoid placing code for targets that never render together in one bundle. A shipping-specific feature should not carry a payment-only validator, for example. This reduces both the deployed unit and the code parsed on a particular checkout step.
4. Request an exception only after optimization
If the minified bundle remains over 64 KB after removing avoidable weight, prepare the minified bundle and esbuild metafile for Shopify’s exception process. Explain which functionality requires the remaining code and what was removed. An exception is a deployment accommodation, not a substitute for reducing startup work or network latency.
Which API versions and components are compatible?
Compatibility is a combination of API version, component implementation, target, available APIs, and the merchant’s plan. Shopify’s versioned documentation identifies 2025-07 as the last API version supporting React-based UI components. Later versions use Polaris web components. Shopify’s migration announcement describes moving from React or JavaScript extension APIs to Preact, Polaris web components, and the global shopify object; it also calls out changes to checkout metafields.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →| Compatibility question | What to check |
|---|---|
| API version | Confirm the extension’s configured version and that it meets Shopify’s current deployability requirement of 2026-01 or later for existing UI extensions after October 1, 2026. |
| UI implementation | React components are supported through 2025-07; plan for Preact and Polaris web components in later versions. |
| Extension target | The target controls which components and APIs are available because each checkout location has different constraints. |
| Merchant plan | Information, shipping, and payment step extensions are available only to Shopify Plus stores. |
| Rendering model | Checkout extensions cannot access the real checkout DOM or render arbitrary HTML; use Shopify-provided components and APIs. |
Start with Shopify’s 2025-07 checkout UI extension documentation to identify React-era behavior, then use the relevant Polaris web components migration guides. The current checkout UI extensions reference and 2026-01 web-components reference define the components and targets available to a particular version.
How to migrate a React checkout extension
- Inventory the starting point. Record the current API version, targets, React components, JavaScript extension APIs, checkout metafields, and merchant-plan assumptions.
- Choose the supported destination version. Existing UI extensions must satisfy the 2026-01-or-later deployability requirement that took effect after October 1, 2026. Check Shopify’s current version policy before selecting a newer target.
- Replace the component layer. Follow the component-specific migration guides to move from React components to Polaris web components and Preact patterns. Do not attempt to inject ordinary HTML or manipulate the checkout DOM.
- Adopt the global API surface. Update calls that previously relied on React or JavaScript extension APIs to the global
shopifyobject where the destination version requires it. - Review checkout metafields. Migration guidance identifies metafield changes; verify reads, writes, namespaces, and permissions against the destination API version rather than assuming old behavior remains identical.
- Rebuild every extension. Run
shopify app build, inspect each esbuild metafile, and confirm every compressed bundle is within the applicable limit or has a documented exception request. - Test each target on its actual step. Information, shipping, and payment targets can expose different APIs and component constraints. Test on a development checkout that matches the merchant plan.
- Measure visibility and usability again. Compare
extension_visibleandextension_buyer_usabletimings before and after migration under consistent conditions.
Migration effort varies with component count, target separation, metafield usage, and dependency weight. Shopify’s documentation establishes the migration direction, but it does not promise that a particular codebase will migrate without code changes or provide a project-specific schedule.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How can a merchant find the extension slowing checkout?
Audit a real checkout, not the checkout editor. The editor includes additional tooling that can distort timings. Shopify’s documented workflow is:
- Open a Chrome incognito window and use a real checkout flow.
- Disable the browser cache in DevTools.
- Throttle the connection to Slow 4G.
- In the Network panel, filter for extension assets and record transfer and decoded sizes.
- Record a Performance trace from page load through the point at which each extension becomes visible and usable.
- Repeat with mobile emulation and on a real phone; slower CPUs can change which extension ranks first.
Keep the checkout step, product, browser, throttle, and device conditions consistent when comparing extensions. Use a table like this for each run:
| Comparison field | Why it matters |
|---|---|
| Visible time | Shows when the buyer first sees the extension and helps identify LCP candidates. |
| Buyer-usable time | Shows when controls can accept input; the gap from visible time exposes interactivity delay. |
| Downloaded and decoded bundle size | Separates transfer cost from parsing and execution cost. |
| Step or target placement | Different checkout locations have different constraints and loading behavior. |
| Network dependency | Identifies extensions waiting on app servers or other external requests. |
| Device and network conditions | Prevents unfair comparisons between desktop broadband and mobile conditions. |
Rank remediation by visible time first, then inspect the visible-to-usable gap. Remove extensions with no active surface assignment and consolidate overlapping functions. A merchant can collect the baseline and identify the bottleneck, but the extension developer controls its bundle and render logic. See Shopify’s audit and optimization workflow.
Best Value
- 5 beloved beginner books by Dr. Seuss will be cherished by young & old alike.
- Ideal for reading aloud or reading alone.
- Includes: The Cat in the Hat, One Fish Two Fish Red Fish Blue Fish, Green Eggs and Ham, Hop on Pop and Fox in Socks.
- Perfect gift for new parents, birthday celebrations & happy occasions of all kinds.
What happens after the first render?
Performance can degrade when an extension repeatedly changes checkout data. Apply a change only after buyer intent is clear and only when the new value differs from the current value. Batch related changes where possible. Shopify warns that excessive changes may be rate-limited.
For text fields and other user input, debounce APIs rather than calling one on every keystroke. Keep purely visual state local, subscribe to reactive data in the smallest component that needs it, and move non-visual reads into an effect or event handler. The detailed rules are in Shopify’s applying-changes guidance.
Quick Recap
A practical release checklist
- API version is recorded and meets the current deployability requirement.
- Every checkout extension is at or below 64 KB compressed, or an exception request includes the minified bundle and esbuild metafile.
- Shopify CLI 3.92.0 or later produced the build metafile.
- External startup requests were removed, delayed, or justified.
- Module-scope work is minimal and does not delay the render callback.
- Targets and capabilities are separated so unrelated code is not shipped together.
- React-era components were replaced according to the destination version’s Preact and Polaris guidance.
- Checkout metafield behavior was retested.
- Visibility and buyer-usable timings were recorded under Slow 4G, mobile emulation, and a real phone.
- Input-driven changes are debounced, conditional, and batched.
- Merchant plan and target availability, including Shopify Plus requirements for information, shipping, and payment steps, are confirmed.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors
