Building Shopify Checkout UI Extensions 2023

Опубликовано: 01 Сентябрь 2026
на канале: Marian abZ
1,258
15

Need a Shopify developer or designer? Check http://abzglobal.net

Source code: https://github.com/sorcamarian/shopif...

https://shopify.dev/docs/api/checkout...
https://shopify.dev/docs/api/checkout...
https://shopify.dev/docs/api/checkout...

How to build a Shopify Checkout UI Extension 2023

Shopify Checkout UI Extension
Shopify is moving from checkout.liquid which will become deprecated on August 13, 2024.

I will show you how to block progress when a certain address is used and examples of some UI Components and where they can be placed at the moment
Use the Shopify CLI

Generate an Shopify app, then generate an Checkout UI extension

How can you customise the checkout? Proceed with the Client Side Validation example to block progress based on address. You can use vanilla JavaScript or React

Introduction to UI components. Placement or Extension points. Show example of dynamic placement on the 3 stages

App permissions for: Blocking checkout progress, Network access, Storefront API access

Web Workers, the environment in which your UI Extensions are running and the global objects

How can they do better with Checkout UI Extensions?

---
Need a Shopify project done? See https://www.abzglobal.net