Shopify Checkout Extension app

Extensions
,
1

Hello,
I’m trying to setup an extension app on the checkout of a Shopify Plus store.

I’ve tested with the preview link and it’s showing up but after I’ve installed the app in the Plus store, I can’t find the the app when I’m trying to add it from the checkout panel by clicking on the “Add app block”.

I can see there are several other apps but not mine

for my toml file I’m using

# Learn more about configuring your checkout UI extension:
# https://shopify.dev/api/checkout-extensions/checkout/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "2025-04"

[[extensions]]
name = "checkout-banner"
handle = "checkout-banner"
type = "ui_extension"


# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#network-access
# network_access = true

# Loads metafields on checkout resources, including the cart,
# products, customers, and more. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#metafields

# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_key"
# [[extensions.metafields]]
# namespace = "my_namespace"
# key = "my_other_key"

# Defines settings that will be collected from merchants installing
# your extension. Learn more:
# https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#settings-definition

[extensions.settings]
[[extensions.settings.fields]]
key = "banner_title"
type = "single_line_text_field"
name = "Checkout Banner"
description = "Checkout Banner description"

and for my checkout file it’s just a simple message

import {
  reactExtension,
  Banner,
  BlockStack,
  Checkbox,
  Text,
  useApi,
  useApplyAttributeChange,
  useInstructions,
  useTranslate,
  useCartLines 
} from "@shopify/ui-extensions-react/checkout";


// 1. Choose an extension target
export default reactExtension("purchase.checkout.block.render", () => (
  <Extension />
));

function Extension() {
  const translate = useTranslate();
  const { extension } = useApi();
  const instructions = useInstructions();
  const applyAttributeChange = useApplyAttributeChange();

  // 3. Render a UI
  return (
    <Banner title="" tone="critical">
      Lorem Ipsum
    </Banner>
  );
}
2

Is the app showing up in the apps list of the store you are working on? If so, have you ran shopify app deploy?

3

Sorry for my late response

Yes, it’s showing in the list of apps and I did deploy it before trying to add it from the checkout block