Overview

This tutorial teaches you how to use checkout UI components to display a banner that renders at the Checkout::Dynamic::Render extension point. It also explains how to support static extension points, so that merchants use the checkout editor to control where the extension renders in checkout.

This tutorial also teaches you how to enable merchants to configure the banner's display using the checkout editor.

• You've set up a new development store, where you've enabled the checkout extensibility developer preview.

To help you build the extension, Shopify offers the following developer tools and resources:

Shopify CLI

A command-line tool for building Shopify app extensions.

Checkout UI extension points API

APIs and JavaScript functions for rendering UI and adding functionality to checkout.

Checkout UI components

A library of Vanilla JavaScript components and React components that Checkout UI extensions can use to render an interface.

• Get started building a checkout extension.