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 learn
Anchor 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
Requirements
Anchor link to section titled "Requirements"- You've completed the getting started guide.
Sample Code
Anchor 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 Checkout::Dynamic::Render and Checkout::DeliveryAddress::RenderBefore.
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 points
Anchor 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 settings
Anchor 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 title, description, status and 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 useSettings() hook:
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 setstatusto one ofinfo,success,warning, orcritical.collapsible: Whether the banner should display controls to expand or collapse the description. You can setcollapsibleto one oftrue, orfalse.
Step 3: Render the banner
Anchor 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.