Solved

Generate Checkout UI extension does not work out of the box

ericute
Shopify Partner
57 4 7

I already have an existing app and just extending it to use Checkout UI Extension.

 

I simply did the following:

npm run shopify app generate extension

And then I provided all the necessary stuff for it. I got to this view:

ericute_0-1692798478682.png

 

I then clicked the checkout ui extension but the Banner that I was expecting isn't showing up.

ericute_1-1692798525200.png

I tried to go to ahead and submit this order until the Thank You page and the Banner was nowhere to be found. 

 

See the video in here: https://www.loom.com/share/5d220c55cb7341458023b176d4226487?sid=fe0b607e-2126-4b06-9d57-49972ffa770f

 

Am I missing something? Has anyone else experienced the same problem?

Accepted Solution (1)
lizk
Shopify Staff
246 58 70

This is an accepted solution.

Currently Checkout UI extensions on the Order Status and Thank you page is only available for testing on Development Stores with the Checkout Extensibility preview enabled. These extensions cannot be currently added to live stores. 
You can review the timeline for release.

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 8 (8)

lizk
Shopify Staff
246 58 70

Hi 👋,

Does the development store you are testing on have Checkout Extensibility preview enabled?

To learn more visit the Shopify Help Center or the Community Blog.

ericute
Shopify Partner
57 4 7

@lizk oh, Checkout UI Extensions is only available to Shopify Plus merchants!

 

ericute_0-1692838458957.png

 

For non Shopify Plus merchants, how will we be able to customize the Checkouts / Thank You page?

 

This was the original question I had: https://community.shopify.com/c/extensions/how-to-add-an-html-block-in-thank-you-page-of-shopify-usi...

 

 

lizk
Shopify Staff
246 58 70

Hi there 👋

Checkout UI Extensions are available to non plus merchants on the Order Status and Thank you pages. The tutorial page for the order status page will be updated to reflect this shortly. 

You can test Checkout UI extensions on regular development stores that have Checkout Extensibility preview enabled. This can be added when creating a new development store.

To learn more visit the Shopify Help Center or the Community Blog.

ericute
Shopify Partner
57 4 7

@lizk where do I enable Checkout Extensibility preview in my store? I can't find it in my Settings > Checkout. See screenshot below. 

 

ericute_0-1692890078005.png

Is it applicable to newly created stores only?

lizk
Shopify Staff
246 58 70

It can only be applied when creating new development stores. 

It will be an selectable option when you create a new development store in the partner dashboard.

Shopify Partners 2023-08-24 10-34-25.png

To learn more visit the Shopify Help Center or the Community Blog.

ericute
Shopify Partner
57 4 7

@lizk I don't see this option for existing stores (even live ones), though.

How do I enable Checkout UI Extensions for existing stores? The reason I ask is we have a lot of existing live merchants and we need this to be enabled for them too.

lizk
Shopify Staff
246 58 70

This is an accepted solution.

Currently Checkout UI extensions on the Order Status and Thank you page is only available for testing on Development Stores with the Checkout Extensibility preview enabled. These extensions cannot be currently added to live stores. 
You can review the timeline for release.

To learn more visit the Shopify Help Center or the Community Blog.

ericute
Shopify Partner
57 4 7

@lizk thank you for this information.