Checkout UI Extensions not appearing on live site

Extensions
1

I’m trying to get checkout extensions to work on my shop (it’s still under development with a password).

So far everything works with the CLI, I’m just trying out “shopify app generate extension” and use the template for the checkout ui extension. With “shopify app dev” It works and I can see everything. But if I deploy it, it just doesn’t ever show up.

I go to the partner dashboard, enter the install shop and install it. The developer shop preview is disabled, it’s installed correctly (as shown in the shop and partner). But no matter what it just never shows up. I tried it with another app and extension and it’s the same.

I tried every solution from the forums and I just can’t get it to work. People say you have to activate it in the customizer for the checkout but the app never even shows there.

I get a ouple of errors in the console but they might not be related?

Autofocus processing was blocked because a document already has a focused element.
        
/private_access_tokens?id=e6193501996e636661b624266f67718a&checkout_type=c1:1 
Failed to load resource: the server responded with a status of 401 ()Understand this errorAI

/favicon.ico:1     
Failed to load resource: the server responded with a status of 404 ()

I’m completely lost.

Here is my code for the toml and the jsx but it is just the standard code:

# 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 = "2024-10"

[[extensions]]
name = "umsatzsteuer-feld"
handle = "umsatzsteuer-feld"
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 = "Banner title"
# description = "Enter a title for the banner"


import {
  reactExtension,
  Banner,
  BlockStack,
  Checkbox,
  Text,
  useApi,
  useApplyAttributeChange,
  useInstructions,
  useTranslate,
} 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();


  // 2. Check instructions for feature availability, see https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions for details
  if (!instructions.attributes.canUpdateAttributes) {
    // For checkouts such as draft order invoices, cart attributes may not be allowed
    // Consider rendering a fallback UI or nothing at all, if the feature is unavailable
    return (
      <Banner title="umsatzsteuer-feld" status="warning">
        {translate("attributeChangesAreNotSupported")}
      </Banner>
    );
  }

  // 3. Render a UI
  return (
    <BlockStack border={"dotted"} padding={"tight"}>
      <Banner title="umsatzsteuer-feld">
        {translate("welcome", {
          target: <Text emphasis="italic">{extension.target}</Text>,
        })}
      </Banner>
      <Checkbox onChange={onCheckboxChange}>
        {translate("iWouldLikeAFreeGiftWithMyOrder")}
      </Checkbox>
    </BlockStack>
  );

  async function onCheckboxChange(isChecked) {
    // 4. Call the API to modify checkout
    const result = await applyAttributeChange({
      key: "requestedFreeGift",
      type: "updateAttribute",
      value: isChecked ? "yes" : "no",
    });
    console.log("applyAttributeChange result", result);
  }
}
2

Hi @Agency8902

When you’re deploying your extension, have you tried these steps?

  1. Make sure the configuration file is using the production version of your Shopify App.

If you’re deploying to a development version, then that would explain why it’s not appearing.

You can run shopify app config link to generate the shopify.app.toml file needed to connect to the production version of your app.

  1. Make sure the store you’re testing with has developer preview enabled

Not all development stores have Checkout Extensibility enabled. You have to opt into the developer preview version in order to access Checkout Extensibility app blocks.

If these troubleshooting steps don’t help, could you please be more specific about where you’re expecting the extension to display?