Building Shopify Checkout UI Extensions 2023

Written By Sorca Marian

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?

Sorca Marian

Freelancer software engineer and architect

https://www.upwork.com/fl/marians
Previous

Shopify Speed Optimization | Themes and Apps
Next

Why Shopify is the best eCommerce in 2023