Checkout UI Extension is not visible on development store

[JackJack1]

Hi there,

I am new to Shopify and installed the CLI to start developing an app. The app has a checkout extension hence I used the below steps:

npm init @shopify/app@latest
cd my-app
npm run shopify app generate extension

At the documentation, the Checkout.jsx is used to create a section at the checkout page. However, I do not see any section at the checkout page. I changed the code at Checkout.jsx but to no avail.

At dev console, I can see the app and the checkout-ui listed but for some reason, the extension preview link does not contain the checkout section. I would be grateful if you could let me know what I am missing here. Appreciate any pointers you might have...

Thanks,

Jack

[theaisyaaziz]

Where are you placing it at? Can you share your extensions.toml file?

[JackJack1]

Hi Aisya,

I have not made changes to that file. Please find the content of shopify.extensions.toml under the extensions folder. Where should I make the change?

# 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-01"

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

# 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"

[inhouse_dev]

have you tired adding the block in the checkout customizer? 

[JackJack1]

I deleted and reinstalled everything, which did the trick for me. Thanks for your help