Shopify Tutorial - Creating a Checkout UI Extension 2024
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- In this video we'll explore how to create Checkout UI Extensions for Shopify.
Links used during the video:
• Checkout UI Extensions Docs: shopify.dev/docs/api/checkout...
• Checkout UI Extensions Components: shopify.dev/docs/api/checkout...
• Checkout UI Extensions Targets: shopify.dev/docs/api/checkout...
• Product Variant Admin API Reference: shopify.dev/docs/api/admin-gr...
• Checkout Extensibility Upgrade Guide: help.shopify.com/en/manual/ch...
• Customize Your Checkout's Appearance - • Shopify Tutorial - Cus...
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
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!
Amazing content! Thank you so much
everything is concise and clear, very well explained. Thanks
This is pretty straightforward. Beneficial man, thank you. keep uploading new videos like this. I am a new subscriber here.
Very well explained
i watch so many video and none of them were even close to this one , thanks
Nice video 👍
Thanks
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 detailed video & its very helpful , Can you please create a video for creaing a custom app and deploying it to AWS using docker , 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
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.
Can you show how to use metafields to control the upsell product?
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.
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?
Can u make all templates pages from scratch in a series.
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 do i add two/multiple product variants
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, 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.
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.
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 th-cam.com/video/NrM_rd6FdtE/w-d-xo.html
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 th-cam.com/video/ZCSdUEMIa8g/w-d-xo.html
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.
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
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
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!
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, 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!
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
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?
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.
Hi how are you, I need to ask what are your top 10 or 5 extensions for shopify development
The only Shopify-specific extension I'm using is the official Shopify Liquid extension marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode. The rest are just other general purpose extensions such as Prettier and Graphql Intellisense.
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!
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.
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 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.
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.
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.
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.
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 th-cam.com/video/-T82eX2iLiA/w-d-xo.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
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?
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
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 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
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.
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 th-cam.com/video/ZCSdUEMIa8g/w-d-xo.html
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.
How we can target "purchase.checkout.action.render[ORDER_SUMMARY4]" by using extension and display the text under the total