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!
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.
Assuming your loyalty points backend has an API you can access you would just have to set `network_access = true` in your shopify.extension.toml and interact with your loyalty points API as needed using `fetch`, then update the UI accordingly based on the response you get from the API. If you need a way to identify the customer to know where to add the loyalty points to the Buyer Identity API may come useful shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/buyer-identity
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.
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?
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"
When your extension has the target purchase.checkout.cart-line-item.render-after you can access the variant using the useTarget hook. More information here shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-cart-line-item-render-after
You talk about pro etc etc, are this Pro feature available for testing? also, is it not possible to build a new Discount code field wit this? to move it from the aside to the main checkout?
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!
You'll need to get the cart line target to query the data for each item in the cart and render your message as needed. I did something similar here ua-cam.com/video/ZCSdUEMIa8g/v-deo.html
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
Hey there! I'm glad you found the video useful. For the styling options it was mainly going through the UI component's documentation and checking which props each one of them received. Pay special attention to the components under the Structure category in the docs and which props can be passed to them, as that's what will be primarily used for layout.
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?
I had the same issue with the preview not loading after npm run dev but I initially set it as Developer Previw, but after few restarts, finally put the --reset flag like it's suggesting in the terminal and it loaded
Great content here! On the topic of post checkout offers, do you know how to check if your app is active in the Post-purchase Page admin settings (admin > checkout > Post-purchase Page)? I have seen other apps raise an alert if the app is not active (if another app is active, for example). I have read through almost every graphQL object and can't find any way to check the status of this. I will love you forever if you know this...
Thanks! I haven't seen a graphql query from the admin api to access that information, but if you've seen that functionality in other apps maybe you can check the network tab to inspect the requests they make when they show that alert? That way you could see if they are querying the admin API to get that data or using some other mechanism.
@@stackingcontext Damn. Yeah, I thought of inspecting it and the one I looked at was just hitting an endpoint of the app and for the query to be performed serverside, and was returned the status. I might try to find some of the other apps I have seen do it and see if they give away any more information in the network request.
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!
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.
You can tag subscribed customers, then from your extension query the customer object and if the tag is not present return null to render no checkout extension ui for unsubscribed customers.
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.
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.
Checkout UI Extensions don't seem to have a built-in way to accomplish this, but you could use a currency exchange API to convert from your main currency to your customer's currency. To get the customer's currency you can use the useCurrency hook shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/localization#useCurrency
Great video! Do you know how I can show or hide this extension through an option in my development app? I'm creating an app and I would like to add a panel to show offers in checkout view but I still idk how to enable/disable extensions from my app pages
Hello, thanks for the great video on Checkout UI Extension. Is it possible to present a way to customise/add shipping options -- offered through an App , hardcoded mock data . I want to creat an app that will call some APIs to get available 2 hr delivery slots , select 1st available slot , return a price for this this shipping option and update the cart total. Thank you
Hello, it seems like that'd be done through the CarrierService API shopify.dev/docs/api/admin-rest/2023-10/resources/carrierservice. I'll consider making a video about it in the future, thanks for the suggestion!
Hey, great tutorial! Is it possible to retrieve the value of customer type metafields within the checkout when user is logged in? I've attempted it, but it seems to only work with product metafields.
Thank you! About your question, I haven't tested this, but you could try getting the customer id from the useCustomer hook and then running a query to the admin API where you request the metafield you need from the customer with that id.
To deploy Checkout UI extensions we need to be on the Shopify Plus plan? I followed your tutorial but I don't see the option to add it to my checkout in the "Customize Checkout" section...
Hello Sir! I hope you are well. I have a question, once the Shopify app is created, how can we deploy it, and how can we use it in stores that aren't partner stores?
Thanks for the video! I’ve followed all of the steps but when I try to deploy the extension, i don't see add block section anywhere and it shows that checkout can’t be edited using sections. what should i do? thanks for your help
Could you have just added another extension to the shopify.extension.toml file instead of deleting that previous one? Or do you have to create another .toml file?
HI I have followed your tutorial it is great but I am unable to deploy my checkout UI extension. I am using a normal account do I need a shopify plus account to even deploy on a store?
You'll need to use to useApi hook and get the query function from it, then create a ProductVariant query where you request the metafield you need. You can build the query from these docs shopify.dev/docs/api/admin-graphql/2023-10/objects/ProductVariant#field-productvariant-metafield
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 ?
Hi. I am working on a Shopify account that has a lot of stores. After 'npm run dev', it only shows 6 stores, without the store that I am working on. How will I select the exact store when it does not exist in the options?
The dev command only lets you work with development stores or Plus Sandbox stores as mentioned in the docs here shopify.dev/docs/apps/tools/cli/commands
@@stackingcontext so the project folder contains some API credentials which link it to the Shopify cloud where the app is stored or something like that?
followed the steps are you outlines and it was fine until npm run dev. Thats when I got a "Could not start Cloudflare tunnel" - its been a horrible error to chase down.
Shopify uses Cloudflare tunnels for the development server of extensions. When an error like that appears check Cloudflare's status page in case they are having some degradation of service or are in the middle of a maintenance session.
Do you need a Shopify Partner account to do this, even if you're only building apps/extensions for your own personal stores? I haven't been able to find any information on this at all.
I haven't heard of a way of doing it without a Partners account, so it looks like you need an account. Is the process of creating one causing you any trouble?
@@stackingcontext It's not causing me trouble, but I'm confused how I would go about deploying the apps/extensions *only* to the brands we own. We do not want our apps/extensions public. You see, I work for a company as a software engineer, and we use Shopify across our 5 brands, which total 8 or 9 stores. Before, if I wanted to tweak something, I could just go to the checkout.liquid file, make my changes and be on my way. Now there is this entirely new process with very little information on how to actually implement it into your own stores. That's where my confusion is. It seems like Partner accounts are for building apps and making money, which is not our intent. We simply want to build out custom functionality for our own stores.
Ah I get where you're coming from. The naming might be confusing, but through a Partners account you can still deploy your extensions only to your store(s). In the Distribution tab for your extension you have two options, Public Distribution which is for distributing an app in the Shopify App Store, and then Custom Distribution which lets you install your app/extension in a particular store. It seems like your use case is covered through Custom Distribution. In the deployment section of this video you can see how that looks like in action, as I deploy the extension built here with Custom Distribution so it is only installed in the store I'm using.
@@stackingcontextSorry to be annoying, I just had one more quick question. In the beginning, you created the extension, then moved everything out of that folder into another one, then created the app. Was that just something you chose to do for personal choice or was there some benefit to that? Again, sorry for so many questions, but our stores produce quite large sums every year and I really don't want to be the guy who broke the checkout. Hahaha.
from 30:56 my screen is not there: "App blocks available for this page" but instead it is "Customizing with app blocks is not available for this page. To customize branding, go to settings." Please, help me :3
Make sure the store you are working with is either a development store or a Shopify Plus store. Also make sure you have Checkout Extensibility enabled.
@@stackingcontextHow do I enable Checkout Extensibility on my store? Because I have a developer store and the latest version of Checkout that I can customize.
@@harshjaiswal3947 Yes, you must create a developer store with checkout. When you create a store through a Shopify partner, you can choose the type of developer store with checkout features
It's been happening over the past couple of days. Appears to be an issue on Shopify's end. It's inconvenient but usually restarting the development server fixes it.
You can use the Update operation on the Cart Transform Shopify Function to change the image at checkout. I cover that Function in this video ua-cam.com/video/-T82eX2iLiA/v-deo.html
@@stackingcontext First and most great appreciation for taking time to respond and preparing these great stuff for free. Kudos to you. Let me check you other video. Thank you
You can test it in a draft Checkout on your store if the store is on Shopify Plus. If not you can create a Development Store from the Shopify Partners dashboard and test there.
Checkout extensions don't need to be hosted after Shopify introduced simplified deploys earlier this year. That's how the one from the video is deployed by just running npm run deploy. Here's the documentation about it shopify.dev/docs/apps/deployment/extension/deploy
@@stackingcontext is there a way to make any cart UI changes in checkout. When the liquid file was available, I used to run a js code to calculate the estimated delivery date of each item in the cart and show it under each item.
You can create a UI extension that whose target is cart-line-item.render-after and render there what you need to render. In this video I do something like that ua-cam.com/video/ZCSdUEMIa8g/v-deo.html
I was following along and coding this and after the step where you add the node(id: portion in UseEffect() My Vs code shows the code in italics and the banner will no longer load. If I don't use back tics the section shows normal but shows with errors. Any idea why? Also the conole.log doesn't work for me at any step despite being able to see the banner initially
@@stackingcontext thank you! the new problem im having is that i can see the extension when i customise the checkout, i click to add it and i see it, press save, then go to the store checkout and i dont see it... am i missing some step?
Make sure you are previewing the extension and that your app is installed in the store. If after that it still doesn't show check the browser's console for any errors.
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!
This is pretty straightforward. Beneficial man, thank you. keep uploading new videos like this. I am a new subscriber here.
everything is concise and clear, very well explained. Thanks
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
i watch so many video and none of them were even close to this one , thanks
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.
Assuming your loyalty points backend has an API you can access you would just have to set `network_access = true` in your shopify.extension.toml and interact with your loyalty points API as needed using `fetch`, then update the UI accordingly based on the response you get from the API.
If you need a way to identify the customer to know where to add the loyalty points to the Buyer Identity API may come useful shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/buyer-identity
Amazing content! Thank you so much
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.
Very well explained
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?
Have you found solution for this ?? please explain.
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"
When your extension has the target purchase.checkout.cart-line-item.render-after you can access the variant using the useTarget hook. More information here shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-cart-line-item-render-after
You talk about pro etc etc, are this Pro feature available for testing? also, is it not possible to build a new Discount code field wit this? to move it from the aside to the main checkout?
it's a great video example of creating app, thanks!
P.S. If you record your screen, please make video resolution at least 1080p!
Thank you! The resolution has been fixed in newer videos so those are in 1080p now.
many thanks , that was very helpful. Question for some reason I do not see my Checkout add app block section?
Make sure your app is installed, your store is in Shopify Plus and you have upgraded to Checkout Extensibility.
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!
You'll need to get the cart line target to query the data for each item in the cart and render your message as needed. I did something similar here ua-cam.com/video/ZCSdUEMIa8g/v-deo.html
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
Hey there! I'm glad you found the video useful.
For the styling options it was mainly going through the UI component's documentation and checking which props each one of them received. Pay special attention to the components under the Structure category in the docs and which props can be passed to them, as that's what will be primarily used for layout.
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?
Nvm I just figured it out. For anyone wondering, I had to click the “Developer Preview” checkbox when setting up a new store.
I had the same issue with the preview not loading after npm run dev but I initially set it as Developer Previw, but after few restarts, finally put the --reset flag like it's suggesting in the terminal and it loaded
@@IvoTsochev How did you initially set it as Developer preview? At what step?
Great content here! On the topic of post checkout offers, do you know how to check if your app is active in the Post-purchase Page admin settings (admin > checkout > Post-purchase Page)? I have seen other apps raise an alert if the app is not active (if another app is active, for example). I have read through almost every graphQL object and can't find any way to check the status of this. I will love you forever if you know this...
Thanks! I haven't seen a graphql query from the admin api to access that information, but if you've seen that functionality in other apps maybe you can check the network tab to inspect the requests they make when they show that alert? That way you could see if they are querying the admin API to get that data or using some other mechanism.
@@stackingcontext Damn. Yeah, I thought of inspecting it and the one I looked at was just hitting an endpoint of the app and for the query to be performed serverside, and was returned the status. I might try to find some of the other apps I have seen do it and see if they give away any more information in the network request.
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!
I mean the metafields of the cart line item.
You should be able to use the metafieldsSet mutation to accomplish this shopify.dev/docs/api/admin-graphql/2024-04/mutations/metafieldsset
@@stackingcontext Great! thanks for your fast response!
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.
You can tag subscribed customers, then from your extension query the customer object and if the tag is not present return null to render no checkout extension ui for unsubscribed customers.
@@stackingcontext Thankyou I'll try this one for sure.
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.
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.
Checkout UI Extensions don't seem to have a built-in way to accomplish this, but you could use a currency exchange API to convert from your main currency to your customer's currency. To get the customer's currency you can use the useCurrency hook shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/localization#useCurrency
Great video! Do you know how I can show or hide this extension through an option in my development app? I'm creating an app and I would like to add a panel to show offers in checkout view but I still idk how to enable/disable extensions from my app pages
I haven't seen an option for it documented anywhere so I'm not sure that's possible at all right now.
Hello, thanks for the great video on Checkout UI Extension. Is it possible to present a way to customise/add shipping options -- offered through an App , hardcoded mock data . I want to creat an app that will call some APIs to get available 2 hr delivery slots , select 1st available slot , return a price for this this shipping option and update the cart total. Thank you
Hello, it seems like that'd be done through the CarrierService API shopify.dev/docs/api/admin-rest/2023-10/resources/carrierservice. I'll consider making a video about it in the future, thanks for the suggestion!
Can you show how to use metafields to control the upsell product?
Hey, great tutorial! Is it possible to retrieve the value of customer type metafields within the checkout when user is logged in? I've attempted it, but it seems to only work with product metafields.
Thank you! About your question, I haven't tested this, but you could try getting the customer id from the useCustomer hook and then running a query to the admin API where you request the metafield you need from the customer with that id.
To deploy Checkout UI extensions we need to be on the Shopify Plus plan? I followed your tutorial but I don't see the option to add it to my checkout in the "Customize Checkout" section...
Yes, as mentioned at the beginning of the video this feature is currently only for Shopify Plus.
@@stackingcontext thank you!
Hello Sir! I hope you are well.
I have a question, once the Shopify app is created, how can we deploy it, and how can we use it in stores that aren't partner stores?
Check 29:08 where I go over how to deploy it.
Thanks for the video! I’ve followed all of the steps but when I try to deploy the extension, i don't see add block section anywhere and it shows that checkout can’t be edited using sections. what should i do? thanks for your help
Make sure the store where you are deploying the extension is on Shopify Plus and has Checkout Extensibility enabled, if not they won't work.
@@stackingcontext thanks a lot
Can u make all templates pages from scratch in a series.
Could you have just added another extension to the shopify.extension.toml file instead of deleting that previous one? Or do you have to create another .toml file?
Nice video 👍
HI I have followed your tutorial it is great but I am unable to deploy my checkout UI extension. I am using a normal account do I need a shopify plus account to even deploy on a store?
Checkout UI Extensions are only supported in Shopify Plus
thanks
Thank you for the tutorial. I'm trying to display variant metafield but I'm facing issues - Can you help?
You'll need to use to useApi hook and get the query function from it, then create a ProductVariant query where you request the metafield you need. You can build the query from these docs shopify.dev/docs/api/admin-graphql/2023-10/objects/ProductVariant#field-productvariant-metafield
@@stackingcontextcould you create a video on it? Part II of this video where you can show how to display metafield? Thanks!
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 ?
Check this video where I go over how to block Checkout Progress depending on certain conditions ua-cam.com/video/NrM_rd6FdtE/v-deo.html
Thanks
How can I add multiple variants?
Hi. I am working on a Shopify account that has a lot of stores. After 'npm run dev', it only shows 6 stores, without the store that I am working on. How will I select the exact store when it does not exist in the options?
The dev command only lets you work with development stores or Plus Sandbox stores as mentioned in the docs here shopify.dev/docs/apps/tools/cli/commands
So it is not possible to add product without the variants with this method right?
No, the variant id is required
Quick question. Is there a way to pull an app and continue development, for example on a different device?
You can use git
@@stackingcontext so the project folder contains some API credentials which link it to the Shopify cloud where the app is stored or something like that?
Yes, the shopify.app.toml file contains de necessary information
followed the steps are you outlines and it was fine until npm run dev. Thats when I got a "Could not start Cloudflare tunnel" - its been a horrible error to chase down.
Shopify uses Cloudflare tunnels for the development server of extensions. When an error like that appears check Cloudflare's status page in case they are having some degradation of service or are in the middle of a maintenance session.
One more question can I clear my cart from checkout Ui extension?
Yes, in this video I showed how to remove one item, you would do the same for every item in the cart and then it's cleared
Do you need a Shopify Partner account to do this, even if you're only building apps/extensions for your own personal stores? I haven't been able to find any information on this at all.
I haven't heard of a way of doing it without a Partners account, so it looks like you need an account. Is the process of creating one causing you any trouble?
@@stackingcontext It's not causing me trouble, but I'm confused how I would go about deploying the apps/extensions *only* to the brands we own. We do not want our apps/extensions public. You see, I work for a company as a software engineer, and we use Shopify across our 5 brands, which total 8 or 9 stores. Before, if I wanted to tweak something, I could just go to the checkout.liquid file, make my changes and be on my way. Now there is this entirely new process with very little information on how to actually implement it into your own stores. That's where my confusion is. It seems like Partner accounts are for building apps and making money, which is not our intent. We simply want to build out custom functionality for our own stores.
Ah I get where you're coming from. The naming might be confusing, but through a Partners account you can still deploy your extensions only to your store(s). In the Distribution tab for your extension you have two options, Public Distribution which is for distributing an app in the Shopify App Store, and then Custom Distribution which lets you install your app/extension in a particular store. It seems like your use case is covered through Custom Distribution.
In the deployment section of this video you can see how that looks like in action, as I deploy the extension built here with Custom Distribution so it is only installed in the store I'm using.
@@stackingcontext Ahhhh. Thank goodness. That's perfect, thank you so much. I've been looking everywhere for this answer. Thank you so so much.
@@stackingcontextSorry to be annoying, I just had one more quick question. In the beginning, you created the extension, then moved everything out of that folder into another one, then created the app. Was that just something you chose to do for personal choice or was there some benefit to that? Again, sorry for so many questions, but our stores produce quite large sums every year and I really don't want to be the guy who broke the checkout. Hahaha.
from 30:56 my screen is not there: "App blocks available for this page" but instead it is "Customizing with app blocks is not available for this page. To customize branding, go to settings."
Please, help me :3
Make sure the store you are working with is either a development store or a Shopify Plus store. Also make sure you have Checkout Extensibility enabled.
@@stackingcontextHow do I enable Checkout Extensibility on my store? Because I have a developer store and the latest version of Checkout that I can customize.
@@paladun123 Were you able to solve this ?
@@harshjaiswal3947 Yes, you must create a developer store with checkout. When you create a store through a Shopify partner, you can choose the type of developer store with checkout features
when I run the peoject it have wrong:Failed to fetch the latest status of the development store preview, trying again in 5 seconds. why it happenrs?
It's been happening over the past couple of days. Appears to be an issue on Shopify's end. It's inconvenient but usually restarting the development server fixes it.
Is that possible to customize the product image on the checkout screen?
You can use the Update operation on the Cart Transform Shopify Function to change the image at checkout. I cover that Function in this video ua-cam.com/video/-T82eX2iLiA/v-deo.html
@@stackingcontext First and most great appreciation for taking time to respond and preparing these great stuff for free. Kudos to you. Let me check you other video. Thank you
is it possible to test it without a Plus Sandbox? and if not how to create a Plus sandbox?
You can test it in a draft Checkout on your store if the store is on Shopify Plus.
If not you can create a Development Store from the Shopify Partners dashboard and test there.
How do i add two/multiple product variants
We don't need to host the checkout extension code on a server? Can you please help me? I'm trying to use Netlify to deploy my checkout extension code.
Checkout extensions don't need to be hosted after Shopify introduced simplified deploys earlier this year. That's how the one from the video is deployed by just running npm run deploy. Here's the documentation about it shopify.dev/docs/apps/deployment/extension/deploy
@@stackingcontext is there a way to make any cart UI changes in checkout. When the liquid file was available, I used to run a js code to calculate the estimated delivery date of each item in the cart and show it under each item.
You can create a UI extension that whose target is cart-line-item.render-after and render there what you need to render. In this video I do something like that ua-cam.com/video/ZCSdUEMIa8g/v-deo.html
Do I need to be a super member to have effects on the store checkout page?
The store must be on a Shopify Plus plan, otherwise you can't create custom checkout UI extensions for that store at the moment.
Thank you!@@stackingcontext
I was following along and coding this and after the step where you add the node(id: portion in UseEffect() My Vs code shows the code in italics and the banner will no longer load. If I don't use back tics the section shows normal but shows with errors. Any idea why? Also the conole.log doesn't work for me at any step despite being able to see the banner initially
When the banner is not showing are there any errors in the browser's console?
@@stackingcontext only thing that shows is bugsnag no other errors
Actually now that I look again there is a uncaught error in extension error
As far as I know I changed nothing and all of a sudden it works and is showing the product in the checkout sorry for wasting your time.
how do you enable checkout extensibility on a development store?
When you are creating the development store select Checkout and Customer Accounts Extensibility in the Developer Preview field.
@@stackingcontext thank you! the new problem im having is that i can see the extension when i customise the checkout, i click to add it and i see it, press save, then go to the store checkout and i dont see it... am i missing some step?
I connected the new store to this extension but my code is not reflected in the UI & and console , What i can do?
Make sure you are previewing the extension and that your app is installed in the store.
If after that it still doesn't show check the browser's console for any errors.
@@stackingcontext Getting the cors origin error the request's mode to 'no-cors' to fetch the resource with CORS disabled
How we can target "purchase.checkout.action.render[ORDER_SUMMARY4]" by using extension and display the text under the total