Adding custom banners to checkout
Previously, you created a checkout UI extension that renders some text in the checkout flow. Now you want to render the text as a banner.
In this tutorial, you'll use the
Checkout::Dynamic::Render extension point and checkout UI components to build the banner. You'll make settings available, so that merchants can configure the banner's title, text, and status level. You'll also provide support for static extension points. Merchants can use the checkout editor to render the extension in one of the supported locations in checkout.
What you'll learnAnchor link to section titled "What you'll learn"
In this tutorial, you'll learn how to do the following tasks:
Set up a banner to display to customers
Set up settings that enable merchants to control the banner content
Support multiple extension points that enable merchants to choose where to render the banner
RequirementsAnchor link to section titled "Requirements"
- You've completed the getting started guide.
Sample CodeAnchor link to section titled "Sample Code"
The sample code imports the
Banner component to build the UI. The code uses settings to provide the content that's rendered in the
Banner component. The code supports multiple extension points, including
You can copy and paste the following code into your
index file and add a few example values to get the extension to render in the browser.
The rest of the tutorial walks through this sample code step-by-step.
Step 1: Set up the extension pointsAnchor link to section titled "Step 1: Set up the extension points"
Setting up the extension points enables merchants to select which extension point they want to use and where it renders in checkout. You can place dynamic and static extension points in any location that's supported for the extension point type.
Set up the following extension points:
Checkout::Dynamic::Render: A dynamic extension point that merchants can place in any supported location.
Checkout::DeliveryAddress::RenderBefore: A static extension point that, in this example, renders above the shipping address form.
Set the extension points in shopify.ui.extension.toml.
Step 2: Set up the settingsAnchor link to section titled "Step 2: Set up the settings"
Now that you've set up extension points, you can make settings available through the shopify.ui.extension.toml so that merchants can configure the banner. Settings display in the checkout editor.
The following example shows a settings configuration that defines the settings
collapsible within the checkout editor:
For this example, the merchant configures the banner's title and description fields using the checkout editor with the following values:
title = "All items final sale"
description = "They're not eligible for returns, refunds, or exchanges."
status = "warning"
collapsible = true
In this example, you'll set the following fields using the
title: The title of the banner.
description: The text in the body of the banner.
status: The status of the banner, which sets the banner's color and icon. You can set
statusto one of
collapsible: Whether the banner should display controls to expand or collapse the description. You can set
collapsibleto one of
Step 3: Render the bannerAnchor link to section titled "Step 3: Render the banner"
In this step, you'll use the
Banner component to render the banner with the content from the settings that you set up.
Localize checkout UI extensions
Localize checkout UI extensions for international merchants and customers.
Checkout UI extension points API