how to change checkout page css in shopify

all right what's going on guys this is,jake and in this video i'm going to be,showing you how you can go ahead and,customize your checkout page in your,shopify store,so the first thing you're going to want,to do is go ahead and go into the back,end of your store i'm going to click on,customize up here under themes if you,don't already have your own store you,can go ahead and start a 14 day free,trial,by clicking the first link in the,description so we're going to go up here,and click customize and then once this,loads up we're going to go ahead and,select the checkout page right here so,i'm going to go ahead and come down here,to checkout,and we can see this is going to go ahead,and show us our checkout page right here,as soon as this loads up so once this is,loaded right here we can see that we are,presented with the default checkout page,that comes with all of the shopify,stores and it looks pretty clean however,we do want to change some of the stuff,to match with some of our brand in here,so if we come over here to the top left,we can click on open checkout settings,and then we get all these different,options right here now what i want to go,ahead and do real quick is i'm going to,go ahead and open up another tab,with the store next to,the checkout page just that way we can,see how we can go ahead and make,everything match,so we can see right now that our buttons,on our regular store are brown which is,essentially the theme of the entire,store but we can see that this button,right here doesn't match that at all so,we want to just go ahead and make all,the branding in here match what your,brand it is out here so in order to do,that we can come down here and take a,look,at the checkout settings right here so,there's a bunch of different things we,can go ahead and do so the first thing,we can add is a background image so if i,were to go ahead and select an image,real quick and let's say i just select,this image we can see that once this,loads up this is going to show up right,here on the checkout page once i click,select and we can see that that gives us,a background image right here on top of,the checkout page and if we go ahead and,look at this on mobile it looks about,the same on mobile right here up top so,i'm going to go back to desktop right,here and then we can go ahead and go,down here to,adding a logo as well so we definitely,go ahead and add our logo in so this is,where you would upload your store logo,click select and we can see that that's,going to go ahead and show up here in a,second but we can see now that the logo,doesn't really look good on top of this,background image so in this case i would,go ahead and want to,remove this current image,and in this particular case i'm going to,go ahead and keep it blank however in,your case you may have a background,image that you like that you want to put,up top that your logo looks good on top,of or maybe you have let's say like a,white logo variation that you want to,put on top of background image you can,do that,but in this case we'll go ahead and just,keep it um blank with the logo and then,we can go ahead and change the logo,position from left,to center or we can go ahead and put the,logo on the right but in this particular,case i'm going to go ahead and keep the,logo here in the center as i think that,looks the best right here and then down,here we can change the logo size as well,so we can make it smaller than this and,right now it's set by default to medium,or we can go ahead and make the logo,large so if you go ahead and change that,we'll see that the logo will go ahead,and update right here in a second and if,we go ahead and view this on mobile once,again we can see that this is what it,will look like on mobile so we'll come,back here to desktop here and then right,here now we have the main content area,which is going to be this right here and,we can see that we can put a background,image in this area if we want as well or,we can change the background color so if,we were to go ahead and put a background,image in let's say we're to go ahead and,just put that and click select and we'll,wait one second and this will go ahead,and load up so we can see that this,gives us a background image right here,and if we were to go ahead and look at,it on mobile we can see that this is,what it would look like so in this case,once again i'm going to go ahead and,just keep its blank because i personally,prefer to keep checkout pages uh pretty,minimal and clean however this is,definitely something you can tweak and,mess around with to see if you prefer,the background images in there and if,you don't want to use an image you can,just change the color so let's say for,example i just want to change this to a,gray,i could go ahead and do that,and it will go ahead and load up here in,a second we can see that now our,background for this side is gray and we,take a look on mobile and you can see,that's what it looks like and we can go,ahead and change our form field colors,as well so right now they're white we,could change them to transparent here,and wait one second for this to update,and we can see that now it matches the,background color because it's,transparent so i'm going to go ahead and,keep this at white and then now we have,the order summary side which is just,this right side here of the page so we,can see we can go ahead and put another,image in here once again if we wanted to,so if i went ahead and put this image in,once again we'll see that it will load,up here in just a second but once again,this makes the text a little bit hard to,read so i'm going to keep with the,blank image right here and then once,again we could go ahead and change this,background color to something else so if,we wanted to go ahead and change it to a,different shade of gray we could click,this and we can see that it goes ahead,and changes the color so that we kind of,have a bit of contrast right here,so at this point now we can go ahead and,edit the typography here so we can take,a look at the headings and this will and,this is where we can go ahead and edit,the font so what i recommend doing here,is just go ahead and match whatever font,it is that you're using in your store,so if you're using let's say helvetica,and ariel in your store then you want to,go ahead and use that here just that way,you can keep everything as similar as,possible and you can do that the same,with the body font right here,and then we can come down here to the,colors right here so first we can edit,the accent so this is going to be the,links highlights and check marks so,that's going to be things like when we,check off this this color is blue and,then we have this link right here so,what we're going to go ahead and do is,change the links color to the brand,color that we've been using throughout,our store so this is going to be,different depending on what,your,store looks like and what your branding,looks like so in this case i'm going to,be changing it to this brown,so i'm going to go ahead and change,this to the hex code of the brown,and we can see that that's going to go,ahead and change right there and then if,we go down here to buttons we can see,this blue button right here this is what,this is going to change and i'm going to,go ahead and change that to brown as,well and now we can see that our buttons,and our text match with the branding of,the rest of our store which is exactly,what we are going for so at this point,once you've went ahead and customized,all this to your liking,you just go ahead and click save and,then you can double check that it looks,good on mobile and then you are good to,go and at this point you can customize,additional checkout settings by coming,here and clicking visit the admin and,this is going to open up the checkout,settings within,your,shopify store back end right here we can,see here that we can edit a couple,things like customer accounts whether we,want to have them disabled required or,optional,optional is going to be the most common,choice right here,and then you can edit things like your,form options so whether you want to,require last name only or require first,and last name whether you want to have,the company name option whether you want,to have the address lines who is,optional and whether you want to go,ahead and let them provide their phone,number if they want as well and down,here at marketing consent we can go,ahead and show an option for customers,to subscribe to our email marketing at,checkout and you can choose to go ahead,and pre-select the option right here,which is definitely the most common uh,method to go ahead and do and then we,can also show an option to subscribe to,text marketing if you have that set up,as well and then we can go ahead and put,in some additional scripts like facebook,or google analytics conversion tracking,right here and then once you've set that,up you click save,and then from there at that point we,have essentially customized our entire,checkout page within shopify and if you,want to go ahead and completely tweak,all of this in a advanced way you're,gonna have to actually subscribe to a,shopify plus plan then you can go ahead,and actually go in and edit this code,and make a bunch of different tweaks,however,uh shopify does have a lot of conversion,data considering a lot considering they,have hundreds of thousands of e-commerce,stores and bunch of transactions going,through their platform every day so they,have tailored the checkout page to where,its conversion rate by default is going,to be pretty high so you pretty much,just need to customize it a little bit,to make it match your branding and at,that point you are good to go,so if you did enjoy this video be sure,to leave a thumbs up subscribe to this,channel for more videos and i will see,you guys in another one

Congratulation! You bave finally finished reading how to change checkout page css in shopify and believe you bave enougb understending how to change checkout page css in shopify

Come on and read the rest of the article!