Checkout UI Extensions Not Showing when deployed

[PrasidKayastha]

Hi everyone, I've created a custom app with Remix template & created a checkout UI extension.

When I run npm run dev to preview on my dev store, it worked fine.
But when I deployed the extensions ( npm run deploy ) to my dev store (set at preview checkout extensibility), the extensions didn't show up in the checkout customize page nor in the checkout page. Can anyone assist me with this issue? 

Below are the screenshots of my code & the issue.

Checkout after deployment => https://prnt.sc/JDkHT8DI4I3T
Checkout while running dev => https://prnt.sc/9oQl-2wcqgZA

File: shopify.extension.toml

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

[[extensions]]
name = "datepicker"
handle = "datepicker"
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.delivery-address.render-after"

[[extensions.targeting]]
module = "./src/PickupFields.jsx"
target = "purchase.checkout.pickup-location-list.render-after"

[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
block_progress = 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 = "ro_shipping_delivery"
key = "delivery"

[[extensions.metafields]]
namespace = "ebzapiet"
key = "locations"

# 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 = "blackout_dates"
# type = "single_line_text_field"
# name = "Blackout Dates"
# description = "Format: YYYY-MM-DD, YYYY-MM-DD"

Here I've given 2 static extensions targets:

"purchase.checkout.delivery-address.render-after" & "purchase.checkout.pickup-location-list.render-after"

within the same extension so that I can get or update the states values among the files & use some common functions in both Checkout.jsx & PickupFields.jsx that I had in another js file.

[Liam]

Hi Prasid

It's hard to tell what is going on without looking at the shop and the app but I wonder if it is just a matter of installing the app on the shop? Meaning going to partners dashboard, selecting the app and installing in the store. After that you should see the extension available in the Checkout Editor.

[PrasidKayastha]

Hi Liam

Thanks for your time. I've found the solution. It was due to the way I rendered the extension targets. This is solved now.

Reference Link: https://shopify.dev/docs/apps/build/checkout/create-multi-page-extensions

[Liam]

Glad you figured this out Prasid and gave an update, if you run into any more issues please create a new post 🙂