how to make one page checkout shopify

hey everyone young here,codingwithyan.com,check out extensions a brand new way of,adding features or customizations to the,checkout of Shopify Plus stores and also,very interesting opportunity if you ever,wanted to build your own Shopify app,because it's basically an entirely new,category and pretty untapped so today,we'll go over why and when to consider,checkout extensions in the first place,what they are exactly and how we can get,started today and I really hope you find,some value in this so let's have a look,all right so we all know that checkout,is where the magic happens customers put,in their names their shipping address,they select the payment method and,cha-ching the sound we all love or dark,complete now if you've been in the space,for a bit you'll probably also know that,the checkout on almost every Shopify,store out there looks pretty much the,same and it's because unless you're on,Shopify plus there are only a handful of,customizations that we can make namely,these customizations include changing or,replacing the logo changing the text,color we can also do some minor,customizations on the order status page,or you can add a post purchase Page by,installing one of the corresponding apps,out there,all right now to be fair there are still,quite a few people out there who find,these options a bit limiting,I totally understand that but also to be,fully honest with you and I might be,throwing myself under the bus here a bit,but personally I think most people,shouldn't have the ability to customize,the checkout,and that's simply because they have no,idea what they're doing and I'm not even,excluding myself here but think about,this way the default checkout has been,used by millions of merchants at this,point and Shopify literally measures and,tracks every single step of the process,and also the checkout has gone through,dozens of iterations a b split tests and,it's just in the company's best interest,to keep the conversion rate as high as,humanly possible because Shopify is,directly financially incentivized to do,so,and if I had to bet on either me who,thinks what looks good versus Shopify as,a multi-billion dollar company that it,is with teams of developers and data,analysts and much more data points than,I have,I think I would bet on them every single,time right and I'm also not here to tell,anyone what to do but maybe that's at,least a thought to consider before we go,before we go on the rant about the,default checkout next time fair enough,awesome so then let's actually have a,look at what the new checkout extensions,are exactly because despite everything,that I just said every store is still,unique and if you can create let's say a,good looking upsell section on a Shopify,Plus store that's maybe doing a million,per year in turnover then even the one,percent uplift which is like a super,conservative estimate would already be,an extra 10K per year so I think you,would all agree that it's still worth to,test these things right okay now in the,past the way you would make,customizations on a Shopify Plus store,was by texting the support and then they,would give you access to the,checkout.liquid file and that was,awesome because you could just add your,HTML CSS and JavaScript directly in,there,and yeah you were pretty much in control,so this was an awesome time,however,yeah you see this is an episode with ups,and downs this approach came with two,major risks first you could introduce,breaking changes which actually happened,to me once and I burned about 15 000 in,clients Revenue,um also have a video about that story,and then second your code also needed,frequent maintenance because whenever,there was an update to the checkout you,just had to catch up with changing,elements or changing naming selectors,to overcome these challenges Shopify now,introduced the new checkout extensions,which are basically custom or public,apps that you can write which is great,because it also means you can sell and,distribute them on the Shopify app store,and to speed up the development you will,also find pre-built UI components such,as text blocks Choice lists check boxes,grid layouts and all these elements are,already styled similar to the rest of,the checkout so that you can easily,create this native or coherent design,experience the new checkout extensions,are also a lot more robust and in order,to place them we can use so-called,extension points though these are kind,of like predefined placement points,throughout the checkout and we can then,anchor our new elements to them and the,best news of oil similar to the theme,customizer Merchants will also be able,to move your checkout extensions around,or replace content by using a new,checkout customizer if you coded your,elements in a dynamic way but how epic,is that okay so now that we understand,what the new checkout extensions are,let's also talk about how we can get,practically started like how we can get,started with building them and a few,things we need up front here include git,installed on your local computer then a,Shopify partner account a development,store with at least one product in there,just just makes it easier to preview the,checkout and while creating that store,it's also super important that we,created under the checkout extensions,developer preview because at the time,I'm recording this the checkout,extensions are not publicly available on,all the stores just yet yeah like this,is how brand new they are and you also,want to make sure that the email address,you enter there is the exact same that,you use for your Shopify partner account,and if that's not the case you might,just want to go ahead and create the,store and then change it afterwards in,the user settings,um or at least that's what I had to do,in order to authenticate my app later,and yeah it took me a bit of time to,figure that out so it might save you a,couple minutes here further we then also,need to have node.js installed as well,as a package manager such as yarn or npm,and that's because we're going to be,using the new Shopify CLI version 3.0,which is awesome because the,installation has been simplified,dramatically and now we can just use one,single command to instantiate a new app,project and all the dependencies will be,installed automatically as well as the,CLI itself yeah so that's amazing and,then lastly we just need an engrock,account to surf the app locally while,still under development and the account,is going to be free of charge but we,just need to grab up the access token,from the dashboard alright now assuming,that you have everything ready and of,course you will also find links to the,best resources for everything that I,just mentioned in the description but,assuming you're ready now it's time to,bring up visual studio code and on my,desktop I already created this,development folder here and then brought,it up in vs code if you don't know how,that works just you can just click on,file here and then open folder and then,select it,and then next I want to bring up the,terminal so you can either click on this,gear icon here and then command palette,or just press Ctrl shift and P,and then view toggle terminal right,and here you can also see that one of,the main benefits of bringing up a,folder in vs code is that the working,directory gets automatically set to that,folder and otherwise you would have to,change directory to navigate there okay,so now then let's get started with the,First Command and we're just going to,start by typing yarn,create add Shopify slash app,and then hit enter,now it's installing some dependencies so,we're just going to wait for that to,finish here we need to enter a name for,our app for now we're just going to go,with checkout app,10 points for creativity,and then we can select which template,we're going to be using um and,personally I only tested the node.js,templates and that's also what I'm most,familiar with so let's just select that,one,and after all the dependencies are,installed we should find this folder,right here check out app in my case,containing the initial set of files and,now the next thing I want to do is,navigate into that folder so we're going,to do a CD as in change directory and,then checkout app,and I want to turn this into an,extension project or add an extension to,that app basically so I'm going to type,yarn scaffold,tension,hit return,here we can select the type of extension,we want to add and we're interested in,the checkout UI,and also give a name for the extension,so let's just do check out Dash EXT here,we're going to be using react as well,and now let's wait for that to finish,so now we should see that this new,extensions folder here was created or to,be more precise the checkout extension,that's how we named it,and yeah this is pretty much where we,find the source files Etc we can take a,look at them in a second but for now I,just want to change the directory to,that folder and let me actually pull,this up here a bit so you can read this,better,let's do change directory and then,extension,and then check out extension,barely fits you on the screen,okay,so let's move into that,and now that we're in this folder the,next thing I want to do is run yarn Dev,that should bring up the development,server and the first time you do this,you will also be prompted to connect the,store log in and so on and so forth but,we will see that in a second so let's,just do yarn Dev,here we need to log in into our partner,account press any key to bring up the,login page let's do that selected my,partner account and now I was,successfully logged in so we can just,close this window,gotta select the right partner account,here let's use coding with young,we're gonna create an entirely new app,from scratch yes,the app name can just be checkout name,that's perfectly fine,and here we gotta select the development,store we want to test this in so I just,went ahead and created a new one check,out extensions YouTube demo how creative,is that and now we need to enter the,ngrok token so we can actually just,follow this link right here,and they will then take you to this page,and as I said you just need to create an,account you can also just sign up with,Google for Simplicity and here you will,find your super private access token,that you should never share on YouTube,so let's just copy and paste that,enter it right here and then hit enter,okay seems good,okay and here we have a partial success,so the tunnel was up and running but it,seems like it couldn't authenticate me,in my development store because I wasn't,properly locked in there so now I'm just,going to follow that link to the admin,dashboard and then everything should,work so let's do that,all right so now you can see that I'm,logged in as the admin,in my development store here and ideally,you just use this direct address so your,development store slash admin because if,you log in via the partner dashboard,it's not working that properly so yeah,just use the direct link and now I'm,gonna run yarn Dev again and everything,should work,so let's actually try that yarn Dev,quickly press any key to log in yes okay,successfully authenticated,and now the tunnel is up and running and,it failed successfully,awesome,um yeah I think I'm just going to leave,this in because that's because yeah this,time it failed because I don't have a,product in there and I previously I,previously just told you that you need,at least one demo product so it's,actually mandatory so let me just go,ahead and create a product and then see,you back here,all right so here we are again I now,just went ahead and created my first,demo product and now let me run yarn Dev,one more time,so yarn Dev,and with a little bit of luck,tunnel is up and running,preview URL and it seems like this is,running perfectly fine now awesome,okay so now that we are up and running,we can go ahead and preview our,extension so let me scroll up a bit here,because there we find the preview link,so let's follow that,so now it loaded the checkout and here's,my test product this is my development,store and the normal checkout that we,all know but this Banner right here is,already coming from our extension and,let me actually show you that so in vs,code if we just navigate into our,checkout extension folder and then,source index.jsx,we can see,that we have the banner right here,and yeah now you could go in here change,anything start building your own app and,pretty much take it from here but maybe,just as a quick example in terms of what,you could get started with,um you could start playing around with,some of the UI components that we that,we saw earlier,um so maybe instead of this Banner you,want to have a checkbox then you would,just go in here see the example and,let's just switch to the react code,so then you would see that we need to,import the checkbox element and this is,how you render it so I'm just going to,copy this markup here for now,and then import the checkbox element,and then we can just replace this Banner,for example,wrap this in parentheses,okay,and if we save that now everything,should get hot Reloaded,and instead of the banner We Now find,our new checkbox element right here and,it already seamlessly fits into the,design and that really shows the power,of these pre-built UI components and how,I can speed up the development beyond,that you can also start playing around,with different extension points right,now everything was set to Dynamic so,that means it can be like moved around,in the new customizer but you can also,use static extension points and then,lock your features into one place,or you could also go ahead and follow,this very in-depth tutorial on how to,build a small product upsell section,like we see in this video right here so,at the very bottom you see you might,also like and then add to cart,um yeah that's going to be an awesome,tutorial and then you can pretty much,take it from here and start building out,your own app idea and I think now is the,best time to get in because it's still,super early and if you ever wanted to,create your own app this might be the,opportunity you have waited for and you,can also keep an eye on the roadmap for,when app submissions will be accepted or,form when the checkout extensions will,be available on the first set of Shopify,plus doors,all right and that's it for this first,video on how to get started with Shopify,app extensions and as long as you're,going to invite me for a coffee or a,beer when your app hits massive success,I sleep fine and I just hope you find,some value in these videos so yeah let,me know your thoughts in the comments,check out the resource in the,description and make sure to subscribe,because then I catch you in the next,have an awesome day bye

Congratulation! You bave finally finished reading how to make one page checkout shopify and believe you bave enougb understending how to make one page checkout shopify

Come on and read the rest of the article!