jelonyx
§ / Shopify · Error fixes · Fix 10

Shopify checkout extension
not appearing.

An installed checkout UI extension doesn't show up in the checkout editor or the live checkout page. Five likely causes below, ranked by frequency, with the fix for each and a scaffolding TOML checklist.

SeverityCritical (Blocking launch)
Time to fix~10–40 minutes
Theme accessPlus Admin Required
Most common causePlan mismatch / Not placed
Affects:Checkout ExtShopify PlusDeveloper

Symptoms

  • Extension is not listed in the "Add block" menu inside the checkout editor.
  • Extension is checked in Admin but remains completely invisible in the frontend customer checkout.
  • Checkout editor crashes or shows a blank gray block when dragging the extension into position.

Scaffolding check

Verify your block render targets are correctly registered in your extension config file. An incorrect targeting name will prevent Shopify from listing the block in the editor.

shopify.extension.toml
TOML
// Shopify Checkout extension target registration
// Verify target declaration inside your checkout.toml or shopify.extension.toml configuration file.

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

[extensions.capabilities]
api_access = true

Most likely causes, ranked

  1. 01
    The Shopify store is not on a Plus-compatible plan.

    Checkout UI Extensions are exclusively available to stores on the Shopify Plus plan (or Shopify Partner development stores with Checkout Extensibility preview enabled). On standard or advanced plans, custom extensions will not render.

    Fix: Upgrade the store to Shopify Plus or test the extension strictly inside a Plus-enabled development sandbox.

  2. 02
    Extension not manually placed in the Checkout Editor.

    Installing a Checkout App does not automatically inject it into the page. The merchant must manually place it in the checkout layout.

    Fix: In Shopify Admin → Settings → Checkout, click Customize beside your checkout profile. In the left panel, click Add block, select the extension, and drag it to your desired position. Click Save.

  3. 03
    Target anchor point is unsupported or incorrect.

    The targeting configuration in shopify.extension.toml specifies a rendering target (e.g. purchase.checkout.block.render) but the code tries to render on an anchor that isn't supported or active in that specific checkout step.

    Fix: Double-check the target string in both shopify.extension.toml and your React/Javascript index entry point. They must match exactly.

  4. 04
    Draft status / app not deployed.

    The extension is running locally on your development server (shopify app dev), but the local tunnel is down, or you are trying to view the live site before running a production deploy.

    Fix: Deploy the app: run shopify app deploy. Go to the Shopify Partner Dashboard, navigate to your app details, and ensure the production extension version is released.

  5. 05
    Missing permissions or API scopes.

    Your extension attempts to fetch cart details or metafields that require specific API scopes (like read_products or checkout access), but the app installation token lacks those permissions.

    Fix: Update shopify.app.toml with the required scopes. Run shopify app deploy again, then re-install or re-authorise the app inside Shopify Admin.

Shopify Custom Work

Need a Checkout Extension built?

Custom checkout fields, upsells, trust indicators, and custom delivery options increase AOV and reduce support load. We build reliable, fully responsive Checkout UI extensions.