show dynamic checkout button shopify

hey everyone and welcome this is corinne,from speedycom,and i'm bringing you today a new,tutorial in which we are going to see,how you can add a secondary direct,checkout,buy now button on your shopify store it,will be added in addition to your add to,cart button,and your visitors will be able to go,directly to the checkout page,if they click on it in the description,of the video,you will find the link that will bring,you to the written tutorial page,where you will have access to the code,that we will be using,if you really enjoy our tutorials please,don't forget to leave a like,and also subscribe to the channel so,that you don't miss out on any of the,upcoming,weekly or bi-weekly tutorials all right,so the first thing we are going to do is,copying,this section of the code it's a bit long,so you will have to scroll,down and select it all and once you've,done that you copy and you go to the,themes page of your shopify admin then,you will have to click on,actions and edit code but before you do,that,always remember to duplicate your theme,files,that way you can come back to a copy,just in case you make any big mistakes,while editing the code you can see that,i have already made,a few copies of my debut theme but you,can also maybe notice,the speedfly theme that i have in my,theme library,it's a theme that we have created within,our agency,and i would advise you to take a look at,it because it's really one of the best,of,the market so now we will go on actions,and edit code page,and once you're here you will have to,find the snippets,folder open it create a new snippet,that you will name direct checkout like,this,once you've created it you will just,paste,the code that you have copied and click,on save,for the next step now we will have to go,back to the tutorial,and find the second code here copy the,code,go back to the shopify editor once again,and now you will have to open the,sections folder,and find the product template file here,you can see,product template that liquid so once,you're on this page,we will have to find the line of code,that says,end form so you can either scroll,manually and find the line or you can,actually use,the search bar with ctrl f,actually you have to click in the field,here then,control f you can see this search bar,that opens here,and you will type and form there you go,you can see,it has brought us directly to the line,of code,that has end form in it so the code that,you just copied,you will have to place it right before,the end form,but be careful because for example here,you can see that,i have already added other codes from,other tutorials,so typically you will have something,like this actually,so let me delete the different codes,so this is what will it will look like,for you if you have never,touched this part of your theme files so,right now i'm going to go back this is,the codes that i have,so my goal is to place the code,before this code because these are codes,that will have to be placed,after the button so i have i want to,place my button before them,so i'm going to paste the code that i,just copied,so typically it's right before and form,but it's also before the other codes,that i have added,from other tutorials so i will click,save,and then we will go and take a look at,what we have,alright so let's go to the store right,away find,a product page and here you can see that,we have the buy now button right,underneath,the add to cart one and the different,sections you can see underneath the buy,now button itself,are the codes that i just showed you,before so if i delete all of these lines,of code,they will actually delete these contents,underneath the buy now button,and you can add them on your stores too,because these are from tutorials that we,have already added,to our youtube channel and our website,we,actually have a few hundreds of,different cool videos in our french,channel,and we are in the process of making them,available in english as well,so now let's make a quick test and see,how the button works,then i am going to explain how you can,change the look of the button,so if i click on buy now you can see,it's processing,then it will bring us directly to the,checkout page,that way you will save some time by not,going to the cart page first,and now that we know it works let's go,back to the product page,and see how we can change the styles of,the button,you may have noticed that the button is,with the amazon style,so if you want to change it go to the,code editor,open the direct checkout file and here,you will have,different types of changes you can apply,to it for example,you can change the word processing or,the word sold out if there is no stock,or if you want you can change the word,by now you can really name the buttons,however you prefer,and after that you can actually change,the style,the colors of the button itself too so,for example if you don't,want to have the amazon style you will,have to delete,these three lines of code and then here,you have the background,color code that you can change to,whatever you wish,so let's say here we have the,golden amazon button and we want to make,it,let's say gray for example for gray it's,f4 f4 f4,i save it then i refresh the page and,here you can see the button is now gray,there are of course other changes you,can make to the,button for example you can change the,width,so it's on hundred percent you can make,it 80 50,however you wish you can change the font,size,so here there is no font size condition,but you can add one yourself,so font size oh there you go,let's say 25 pixels,then i have to save of course refresh,the page,and here you can see it's a lot bigger,but,what we are going to do is go back to,our amazon style,save it and keep it that way because i,think it looks good,but it's really up to you you can modify,it however you want,so this is pretty much it for this,tutorial i really hope you enjoyed the,content and found it useful,if it's the case like the video leave us,a comment and subscribe,to the channel so that you don't miss,out on any of the coming videos,you

Congratulation! You bave finally finished reading show dynamic checkout button shopify and believe you bave enougb understending show dynamic checkout button shopify

Come on and read the rest of the article!