Shopify Tutorial - Creating a Checkout UI Extension 2024

in this video we will be exploring how to create Shopify checkout UI extensions which are a recent addition to the Shopify platform and will allow us to build custom functionality that margins can install at specific points in the checkout flow with the advantage that they will maintain a cohesive look with the rest of the checkout elements and any modifications that the merchant has turned to that page just a few disclaimers before getting started at the time of recording this video check out UI extensions are only available for Shopify plus customers and also you will need to have a checkout extensibility enabled on your store for this to work so if your store is currently using check out the click review need to take a look at the upgrade guide for the I'll leave a link to that in the description so with that out of the way let's start a Shopify our project with npn mini Shopify uh latest let's call this my checkout extension and let's select start by adding your first extension this will download and install the dependencies for the extensions template which is the one that we will be using in here we don't need to worry about creating a full app for this to work also if you already had an app you can of course create add an extension to an acrylic system app we will see is installing okay so please finish installing and now I'm going to open this folder that it created and I'm going to take all these files out of here delete this put it in the rig and now I'm going to run 10 pm from Shopify app generate extension so even if you had already an app created you can run this comment and you will be able to update check out your extension that we will be doing in this video so in my case I'm going to do create this as a new app I'm going to call this check out extension one I'm going to select in here check out UI and I'm going to select here type straight with react also feel free to select whichever one of these options you feel more comfortable with now let's wait for the dependencies to install and I'll be back in a second okay so this finish installing and now let's open this extensions folder and let's see what we have in this SRC folder they check out the TSX here this is what controls what is being rendered in the UI and also over here in Shopify that extension.tamil this is the configuration for our checkout UI extension so for instance here you can see that we have API access this is the target of where this extension will be rendered this over here should match with this we will take a deeper look at that in a moment some other interesting configurations are ER network access for instance if you had an external API you need to talk to rendering your extension you will need to have this at the dream I'll have commented because that won't be the case for this example if you needed to access meta Fields this is where you will set up which ones you need access to and also if you wanted to let the merchant configure some elements of the extension you will have to create settings such as this one that is a single line text field that will let the merge and select the title for the banner we will take uh depending moment as well now let's run npn from that and let's see how this extension looks like it will ask me what I want to install this I'll check this store and now I'll press p to see a preview of this so I will click on this and this is my preview link that shows how my extension looks like so the text that it is showing is what is in here so if I were to change this for hello world you can see that it was reloaded and I see it here hello world previously it has this this translate function you will have to use this if you were to distribute your your checkout extension in the Shopify app store for instance because Merchants with different languages enabled will install your store but for this example I'm just going to put the text as is foreign so okay people are working here and now let's have a look over a limitation that checkout extensions have and instead if I wanted to just run render plain HTML such as these hello world in between P tags you will see that nothing is being rendered and the reasoning behind this is that if we wanted to render anything in the UI we will have to use the different components coming from this checkout library that Shopify gives us the reasoning behind this is that they want to keep the UI for this cohesive so by using these elements they ensure that we do that you can take a deeper look at which elements we have access to over here I will leave this link in the description but these are all basically react components so if I wanted to just render a text that said hello world I will use this text component let's do just that so I'll import text and over here I will replace this learner with a text that says hello world and now if I go here you can see that my Hello World test is being rendered as expected now let's take a look at how to create a little extension to Showcase some of the features that these have available okay so the extension that we are going to be building is one that we allow the merchant to surface a product in the checkout and will allow the customer to directly add it to the card from within there this could be the base for something like complete the collection or complete the set or this product goes well with this other project or perhaps to Showcase new products that have been added to the store so it has quite a bit of flexibility now the first step that we need to do is first let's see what we have in the extension here you can see that my station currently is this hello world text and it is being rendered here above this form however I think it would make much more sense if we rendered it maybe below the product that I that is currently in the card so let's do that here we have a list of the extension targets and you can see where each one of them renders content now what the one that we care about is here in order summary and I think it will be this one this purchase the checkout car line This render after now you may see that some of them are blue and some of them are red the ones that are red are static which means is that the merchant doesn't have access to reordering them or putting them in a different place and the ones that are in blue do allow for that so you can see that this one this one and this one all share the same name so if you created an extension that has displacement this target the merchant will be able to select whether they want to put it here or here or here meanwhile if we created one that has this name the margin doesn't have an option to put it somewhere else they either enable it and it will show in here or disable it and it won't show at all so I think that the one that we will be using is this one so let's go to BS code and let's replace this with purchase I think a bit of the completed the wrong one check out cardline list render after check out yes this one I think it is and now recall from a moment ago that I said that we needed to update these two going to do your stats you can see that if I don't refresh like I have to shut down this and open it again you can see that nothing is being rendered here because it has the previous version of my extension configuration where this hasn't been changed thank you okay I had a diaper here Brazil that didn't affect it now let's shut this down let's run npm on that again let's open the preview one more time let's click on this and you can see here that my hello world is being rendered now over here Jesus okay now let's get the data that we care about so let's have here this variant ID the reason we are using a variant ID instead of a project ID is because in the settings for the checkout extensions we are only allowed to let the merchants are like very variants not projects themselves and when they select a variant we get in the code the variant idea for the time being I'm going to just have a hard-coded variant ID over here and then once we deploy this extension later in the video we are going to see how to make data Dynamics so the merchant can select whichever variant they want so let's have this like this Shopify project variant and here we are going to find a variant ID for our store so over here I'm going to find a product with variants such as this one and then I'm going to select this one over here and I'm going to grab this ID from the URL and paste it over here now I'm going to get rid of this Translate I'm going to get rid of one or two and let's get query which will allow us to query the graphql API and let's graph use effect and user state so I'm going to have state of buying data and set volume data let's set it initially to null this will be either node or the variant itself I set this to any we will change this for a type that makes much more sense in a moment now let's have an effect is effective here that will run as soon as these components renders and let's have an async function get variant data let's call it over here now let's have over here clearly result equals and we are going to use the node query over here because there is a direct query for a product variant so here we are going to place the variant ID and then we are going to have a graphql fragment for on Project variants so if what what this query is doing is that it is basically getting us any element with this ID we know that this is a product variant because here this ID has a present variant but this could also be a filter collection or something else hence why we have to have this fragment over here to get the data that we need from referral so I'm going to get the title of the variant the price of it and let's see if this is working as expected so I'm just going to log the query result in the console and let's see what we have so if I go here if I open this console over here you can see that I'm getting this data and let's see if this is accurate we'll put this over here the price is accurate and this is the ice one and this is the ice one and this is the price so it appears to be working now we need a few other things so we need the image and the alt text for the image okay and we also need the product and from the product the current product of the of this variant we're going to get the title and the featured image the reason we are getting the video image of the product is because if this variant doesn't have an image directly Associated to it we are going to default to the orange image so let's graph all of this let's verify that this is working so let me first is when it appears to be getting all the data that I needed so now let's say the data then set very set variant query result that node the data that node and now let's write a typing for this so first let's say interface variant data title is a string the price the amount even though it looks like a number the API is returning a string so we will set it that way the government is a code it's a string damage may not come so let's put it as optional it has a URL which is a string and it has alt text which is a string the product which has a title that is also string and the featured image of the product which is also an optional it may a product doesn't necessarily need to have an image and then it has a URL and a string so here now we can change this any type with variant data and over here we can also indicate a type for the return of this query so this gets a node and inside that node is a variant data now this doesn't throw an error and let's cancel that log over here variant data we see that first it is no as expected and then we have all the data that our query returned so what we will do is that if Barren data is not defined or it's not internal or basically lesson of trend or anything and if it is then we are going to render this hello world so if I refresh this for a second you can see that there is nothing and then once we get the data we have this hello world you can also just do json.stringify more data to see it over there yes yeah you can see that all the data that we got is rendered over here so now let's see how we can run their IUI in here using the Shopify native elements so that's just that okay so before getting there I just wanted to mention that I got the name of all of these fields from the admin API so this is the product variant every Source in the admin API and you can see here that it has a description of every field and what it returns and a short description of it so if you need to grab some different fields from the variant or just a different resource all together like a collection or something like that you can go to the admin API and look for it and you can see all the fields that this query will return for that so not that I mentioned this let's start building the UI for our extension here I have the documentation for the different components and now let's start by deleting this and the first element that we will have is an inline layout an inline layout is basically a way of having display Flex over here because we cannot add CSS we have different like the components that are already existing here so this is basically having a deep free display Flex now let's have a checkbox this is what we will use to indicate whether the variant dividend item has been added to the card or not it got imported from the wrong package so let me delete this and now let's have an image did it good importance okay let's have an image from this one and the source will be variant data dot image and then URL and if this doesn't exist then variant data the product that featured animation dot URL for the alt text will be the same so the name of the Alters here is accessibility description and you will replace URL here for alt text likewise here now let's have a Blog stack which is basically a way of having one component below the other just like this example over here and let's have a text that will have variant data the product the title and then variant data the title so this will show the name of the product and then the name of the selected variant down below this let's have the price of buying data dot price per amount in the variant data the price that code is the code now that we have this over here let's see how this looks like so this is what we currently have you can see it uh it is not looking that good but we will take care of that in a moment now let's have a state for controlling whether the item is selected or not so is selected selected is a state it would be initially false and the checkbox will be checked depending on whether they selected this is selected or not and now to make this selectable let's wrap all of this in a pressable component so if the user clicks anywhere within this area they will have they will trigger the select of this item so pressable you can see it over here this is basically a generic container tab Also let's let's uh uh use it as a pressable area so a scenario to trigger a group so here let's have thumb press set is selected to deselect it to the to the opposite of the current value and now let's see this is working and now let's start fixing the UI for this so you know inline layout the first thing that we want to do is we want to have the alignment the block alignment the center that puts the checkbox in the middle which I think looks better then let's have the space the spacing between them being the base and base so this is the spacing between the columns previously they were not being displaced properly now it looks a bit better but still you can see that this checkbox is taking way too much space so what we can do to fix that is over here in columns we have an array that indicates how much each column will be explained so there are three columns the checkbox the image and this blob stack so the First Column the checkbox we wanted to occupy Auto which means make it as big as as it needs to be then the middle column that's 1980 pixels and then the last one let's make it filled so it takes all the remaining space if we have if you take a look at this over here I think this looks much better now we can add a few other parameters as well to make it a little bit better like for instance so let's just change the let's change the padding let's make a base so it is obviously larger and now for the image let's add above the radius of Base an order of Base in a border with a base and what this does is that it will make it look like this image over here that has aboard the radiance also this one is a bit smaller but it has as you can see that border color as well and it makes it look a bit better you may be wondering if we can change the background color of this pressable area we can't because Shopify doesn't let us do that the way that this checkout works is that the merchant has the last word or the last saying of how it looks like so if they wanted to use a different color they are able to do so from the editor themselves and as a result of that we cannot really change colors for things like that so if I look over here for colon you can see that there is not such a thing as a background color I can change the opacity but I cannot change the background color for any of this as a matter of fact I cannot even change the color of this border this is just a default color that is consistent with all the other borders that you can see in this UI so don't don't spend too much time trying to change the update because you probably don't have much of update now that we have the UI for this let's add a title for that so let's create a fragment so let's add a heading and let's say over here other products you may like also we are currently only showing a simple project but that's fine this is just an example and the label is level two this level is what indicates which heading you use H1 H2 and so on but this is only visually so the underlying HTML tag will remain the same for accessibility purposes so Shopify will determine which one they will be using here by changing the level you are just changing how this looks like visually so we use whichever one you understand looks better for your use case now let me set a lot spacer over here which is a way of saying setting a space in between components incredible important from the from the wrong package unless we beat it under this because it happens often in vs code now let's say let's set the spacing to be the base let's see how this is looking I think it's looking fairly well and let's just copy by there at the top to create a clear division in between this section over here with the products in the card in this section from our extension and it may look like we also need to add a spacer over here um it doesn't seem to be saving we've been safe all right I don't mean above the space are related to be below it now it is so this is basically the UI for our extension now let's make it work so let's make it that whenever I click on this this product is added to the card and it shows over here and the price updates over here and then if I click again the product will be removed from the cart so let's do that what we will be doing for this last part is creating an effect this one will trigger whenever you select the changes now if he selected this means that this just became true so let's add the product to the card otherwise we'll have to remove it so we'll have to make use of two hooks over here use card lines and use apply cardioles changes so the names are pretty self-descriptive but basically use cutlines for the show will give us the names the items that are in the card at the moment so let's delete yourself then apply Hardline change we'll let us update the car lines so here we will be adding a product to the card so the type of this will be add card line a quantity of one and a merchandise ID of the variant ID and then here first we'll have to double check that the item is already in the card because we need to get the cardline ID so card lines dot find down card line caroline.merchandise.id is the same as variant ID you will get the idea of this which is optional details it isn't necessarily in the cards at the moment if we found an ID then we'll do applying card line change we will remove the cards the cardline item we have the ID over here and a quantity of one now let's see if this is working so if I click on this that ain't got added to the card with the correct variant if I click on this then it gets deleted you can see here also that the price is being updated and any other elements in the UI that were dependent of it will also be updated so if there was another extension that was doing something with the card line items that extension will have to be used in this hook as well which will tell that the car line items just got updated which is great so now let's see how we can deploy this extension and then how we can let the merchants select a variant to show over here because if you recall from the beginning of the video we have this variant ID hard coded over here which is not ideal okay so as this is just a development server when we close this up the checkout extension gets removed from the checkout in our store so to make it permanent here we have to create a deployment so let's run npm from deploy let's release this new version and now let's click over here and now let's uh let's click on distribution distribution select custom distribution and over here we will paste the URL for our store I will copy this and I'll generate a link now I will copy this link over here and I'll go to my store thank you and now we'll install this now with my checkout extension enabled I'm able to go to settings then to checkout then to customize for you to have this over here you need to have checkout extensibility enabled if you do you'll see these customize over here and then if I click on a Blog you can see here my extension that we just created in the video and this is showing as is over here now let's click on Save and this is working just fine but now let's see how we can allow the merchant to from this menu over here select which product is showing over here okay so now I'm in the settings for my extension and what I'm going to do is that I'm going to uncomment this now let's open this link of the documentation and let's see over here the different settings that we can have you can see that we can have a Boolean a date a daytime and a few others but the one that we care about is variant reference you can see here in the example value how this looks like and if you go to our code you can see here that this is pretty much the same thing that we had over here so the replacement of this hardcoded value for the actual data will be easy enough so now let me replace the type for variant reference the key will be selected variant the name will be selected variant and I don't think we need a description for this this is really self-explanatory now let's go to the code and take a few things to get this data from the settings okay and the last step is to call this your settings week to get the selected value from it so let's say settings equals to your settings and variant ID now will be settings Dot let's grab this key from here it's just like that let's set this string because the return value of this is either a string or number or a Boolean let's also commence this previous rmdv because we don't need it anymore and now let's say that this will only be called if Varian ID is defined and likewise Maybe is faulty or undefined let's just return node now let's run npm from deploy to see these changes and let's go to the checkout let's go to customize over here and if we change this and we for example select this one and I hit save now if I refresh the page you can see that the item here is the one that we selected over here and I can add it to the card I can remove it by clicking this and that's about it so here you have it this is how you create a checkout UI extension for Shopify and if you have any questions feel free to leave it in the comments below also subscribe if you are not already subscribed because I'll be uploading more videos like this in a near future so see you guys in the next one

Channel: Stacking Context - Shopify Development Tutorials

Views: 19,357

Keywords: shopify, shopify tutorial, programming, shopify app, shopify extension, shopify javascript, shopify typescript, shopify checkout extension settings, shopify graphql api, shopify checkout extension deploy, shopify development, shopify new features

Id: L-Kyx-pRoYI

Length: 34min 8sec (2048 seconds)

Published: Sat Sep 23 2023