Checkout UI Extension Not Showing on Production Store

[jcarpenter]

Hello there,

I have created a checkout UI extension for a Shopify Plus store and have run into some difficulty being able to see it in the checkout.

I have a Shopify Partner account and created the app and extension using Shopify CLI 3.0. It creates a checkbox under the shipping methods that will add a product to the cart. I have verified it works on a development store created from my partner account using n grok. I set up distribution to be a single link for the Shopify Plus merchant and installed it on that Shopify Plus store. The extension is versioned and published. When I try to test an order on the Shopify Plus store, the checkout extension isn't showing under the shipping methods.

I have a few deployment questions regarding the issue:

Do I have to host the app that the extension is run through using a separate service before it will show on in the checkout? (Fly.io, Heroku, etc.)

Do I have to embed the app in the checkout editor once it is installed?

Do I have to have a Shopify Partner Plus account for it to work on the Shopify Plus store? (My current partner account is a regular partner account.)

Any assistance is appreciated. Thank you!

[amorkan]

I've just got my Checkout UI Extension installed on a Shopify Plus store. A few things I've learned that might help:

1. The app doesn't need to be hosted. Once you deploy it, Shopify are hosting it from that point forward. It's like Functions in that regard. This is not clear from the docs at all.

2. My extension has a static block and a dynamic block. The static block isn't currently showing - it looks like there's a JS error. The dynamic block needed to be added via Checkout customiser in the Shopify backend. You click "Add App" - it should then show you you're installed app, click on that and

you should be able to move around the dynamic block and place it where you want it.

3. We're a Shopify Plus Partner so I can't answer your final question. What i have learned is that it appears that the "deployed" app will only work on a Shopify Plus store where a one-time installation link has been generated.

I hope this helps.

[RossellaF]

With regards to point 1 (the app doesn't need to be hosted), did you find anything in the docs about this at all?

[amorkan]

No, I didn't find it in the docs. I just figured it out by trying things out.

[AlexPss]

Regarding hosting, here's a small breakdown of how hosting would work depending on what you're building: https://shopify.dev/docs/apps/platform#hosting.

[AlexPss]

Regarding hosting, here's a small breakdown of how hosting would work depending on what you're building: https://shopify.dev/docs/apps/platform#hosting.

I did the deployment (npm run deploy) + a publish in the partners dashboard, but I still can't get my basic (default) extension to show at checkout :(.

[amorkan]

Ah great thanks. Missed that page. Shopify's documentation is great provided you can find the right page 🙂

Have you activated the app/extension in the Checkout Editor? This needs to be done for both static and dynamic extension points on live stores (I struggled for a while expecting my static extension point to render).

[katsuxD]

Hey brother, Can I have a picture of where it is? Try to find it but evething seems hopeless, my checkout UI demo extension did not show up too

[StudioForty9]

Here are some screenshots from the Checkout Editor (Under Settings -> Checkout) from my sandbox.

Add app block is at the bottom and then you can configure / drag and drop each app block into the checkout step.

[IhorVyshniakov]

Finally, my custom app appears on the development store 🎉

Answering to your question about activation of app/extension.
I created extra field on checkout with static block 

purchase.checkout.contact.render-after
due to this tutorial
https://shopify.dev/docs/apps/checkout/validation/block-checkout-progress?extension=react
You can configure this target inside your app code + configuration file(shopify.extension.toml).
My extension didn't appear on Checkout, because there was an error in Checkout page console(my bad).
When I fix it -> my extension immediately appears on Checkout page of my Development store.

Without any extra "activation".

You should understand this "activation" depends on target configured in your app(static block OR dynamic block)
https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets
with static block you don't need to do anything to block appear on Checkout page
with dynamic block -> you should "Add app block" to add your extension to Checkout page

[IhorVyshniakov]

same situation