Shopify Tutorial - Creating a Checkout UI Extension 2024

In this video we'll explore how to create Checkout UI Extensions for Shopify.

Links used during the video:

Timestamps

0:00 - Introduction
0:40 - Initializing a Checkout UI Extension
2:36 - Exploring the extension's settings
3:33 - Previewing the extension
5:50 - Explanation of the extension we'll create
6:13 - Extension Targets
9:29 - Querying Shopify API data
17:17 - Building the Extension's UI
26:21 - Interacting with the Customer's Cart
29:08 - Deploying the Extension
31:17 - Creating Extension's Settings

[TravisRayLive]

My goodness, thank you so much for this video. Shopify never does a good job explaining this kind of stuff. I've been working with the same company for years, and every time it's time to do something in Shopify that's new or different, channels like yours are always the ones to save me from their documentation which is all over the place. Much appreciated! Subbed and liked!

[atulsharma]

everything is concise and clear, very well explained. Thanks

[loigideliguer]

This is pretty straightforward. Beneficial man, thank you. keep uploading new videos like this. I am a new subscriber here.

[mohammaddh]

i watch so many video and none of them were even close to this one, thanks

[IhorVyshniakov]

it's a great video example of creating app, thanks!
P.S. If you record your screen, please make video resolution at least 1080p!

[zokymzd]

Hi this is really helpful.
It would be nice to make a video about build checkout ui extensions that talk to an external backend and implement billing with the Shopify billing api.

[pravinchhasatiya]

Very detailed video & its very helpful, Can you please create a video for creaing a custom app and deploying it to AWS using docker, Thanks

[jayachandrann]

Thanks for this video, this has been very helpful to understand the customisation on the checkout, I was looking for adding a loyalty point redemption module in the same place where you have got the variant. Do let me know if there is any other video which helps us to check the model implementation.

[zokymzd]

Hi, please can you create a video covering setting up the Shopify billing api and how to properly add billing to a Shopify app whether it's just a checkout ui extension or otherwise?

[TheNewGreenIsBlue]

Wow... what a FANTASTIC video. I have one question. Is it possible to access the current variant's in that line item. I'd like to add some extra information for a product if it's on sale... something like "You SAVED $0.00 on this product"

[theadal]

could you please make one video on how to enable the checkout ui extensions only for subscribed users. that would be really helpful or redirect me to the source explaining that.

[IgorVorobeychik]

many thanks, that was very helpful. Question for some reason I do not see my Checkout add app block section?

[human_error]

This is really helpful - Thanks!
How did you know what styling options you could use? I know you showed components that where possible but I didn't see how you knew what to use so you could apply the styling you added

[gfreeman]

Thanks for the video! I’ve followed all of the steps but when I try to preview the banner nothing shows up. I just created this dev store, is there any additional steps i need to take to get this to work with a new partner account? Does this partner account also need Shopify Plus access or something?

[DatsunZ]

Can you show how to use metafields to control the upsell product?

[youdota]

There's a problem here. If you add to cart the product on the list on your store and when you go to checkout the product is automatically removed in your cart because its unchecked.

[santiagomoreno-peu]

Thank you very much for the video, your explanation is very clear! I have a question: in some cases (customizable products), I need to modify the information displayed associated with the product's metafields. Is there any way to do this or is it impossible? Thank you very much!

[AndrewDelman]

How would I do it so the Text shows a FINAL SALE line in the cart line if it is in the collection final sale? Right now I am so close, but when I add a product to the cart with the handle "final-sale" it adds the text to all of the products instead of each product individually! You are so good at these!

[sowndharyakrishnan]

Hi i need to created one custom text box mandatory field inside the checkout page. How to make prevent the submit, if user try to submit before filling that field ?

[christianthrige]

Hi great video, however i stumble across an issue on our site, since we have multiple currencies available for customers, but dont know how to change the currency format in an extension like this. So my question is, how do i change the currency shown on the upsell product? My main currency could be dollars but the customer might be from europe. That makes the product have the dollar value/number/price, which is not ideal.