Source code: https://github.com/sorcamarian/shopify-tricks/tree/master/checkout-extensions/basic-examples

Links to the documentation:

  • https://shopify.dev/docs/api/checkout-ui-extensions
  • https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis
  • https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components

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?