how to change the color of shopify add to cart button debut theme

what's up guys in this video i'm going,to show you that how you can change the,color of add to cart button,so currently you can see on my screen,that here we have add to cart button,so if you are interested to change the,color of this one then i will be showing,you step by step that you how you can,modify the color and i will be also,considering two,or three more themes so in which i will,be modifying the color and from there,you will be getting the clue,that if you have a different theme which,i am using right now,so currently i have installed a debut,theme,and if you have any other themes so you,can also,use the same code but still if you are,facing any issue then you can connect me,i will be adding the contact details,below in the description so i will be,giving you the hint and you can just,modify a simple thing,uh onto your store then definitely you,will end up with,changing the color of your add to cart,button so before proceeding further if,you are new on this channel,then please like and subscribe this,channel,so let's get started so you can see that,this is my cart page uh sorry product,page,and we have the cart page as well so,first of all let me go to my dashboard,this is my dashboard of the shopify and,i have to click on online store,and here i will be getting the option to,do the customization so basically i'm,interested to do the customization in,the,coding part so i have to click on,actions and then we have edit code,so click over it,then after uh you have to go move ahead,with,the with the theme page or maybe cart,page,but for now we are interested to modify,in both the pages like uh,product page as well as cart page so for,example i am,going to the cart page so here we have,uh sorry on the card page we don't have,any,type of uh any type of add to cart,button but on the product page we have,so let's let's modify this thing first,of all,so we have add to cart button and i am,going to the,assets and here we will be having theme,dot css if you have theme,dot s css then that's also fine so you,should click,on this css file and then after you,should scroll it down,and at last you have to add some css,code,so here we have some lines uh where we,have to,add that specific code so first of all,let me,give you a small hint so i'm going to,right click over it,and then after i will have,in the inspector actually this is you,have no need to worry about this,specific thing this is technical thing,but i'm just giving you the hint that,how you can identify,any specific html element into your,store,so you can see that this is the button,here and the button,type is submit and the name is add all,right,so what i will be doing here is let me,modify the color here for example,i am just testing that here can i modify,the color,so for example i am writing here black,so you can see that the color is going,to be modified if i am adding here green,then you can see that this is also,working fine if i am changing any other,color then you can also see that,these colors are applied onto this add,to cart button all right,so for example i am interested to add a,black color,so what i will be doing here is i will,be going to this code,and then i will be writing here button,then after i have to write,name equals to add,so you can see over here we have add,this button name is add and then after,we have to and you can also add,this specific class so let me give you,the example,so if i am writing this one,then after we have to add here,background for example black,all right so let me save this code and,let me,refresh this page once again so until,yeah this is saved now so let me refresh,this page,so now you can see that our add to cart,button has been,modified i mean the color has been,modified and if you are interested to,add something extra let me show you we,have another class here,product form called submit all right,so i can also add this class so i have,just copied the class name,and then after i need to paste it over,here,so for example i am removing this,specific,selector and i am going to add dot,operator then after i am pasting that,specific class name,and let me save this one and before that,i am going to add here red color,so let's see if this is working or not,why i am giving you multiple options,because,in that way you will have for example,you have multiple themes,so you can also use this type of option,so you can see that add to cart button,color has been,changed all right so we have two things,first of all we can,use the name selector and another is,like class selector if you are using the,class selector then you will have to add,the dot operator,and if you are using the name then you,have to,use the same way which i have used,earlier,for example one way is this one,and another way is,this one all right so these are the two,ways,through which we can modify the color,name,all right so one more thing is for,example i am considering uh,the second one and i am going to comment,this,first one comment means this would not,be used i mean for now this,uh the i mean on the browser it would,not be implemented,so only this would be applied all right,so let me save this one,and let me refresh the page again,now you you will see that the black,color would be applied,and you can also know see that here we,have add to cart,button text color that is black so,that is red and we are interested to,make it,different so you can also add here color,white for example because on the black,colors button,we should have the white color text,that is suitable so let me refresh this,page and now you can see that,add to cart button is now looking great,and if we are hovering over it and if,you are interested to modify,that that color as well so how you will,be doing that is,the same thing you are going to copy and,i am going to paste it down below and,what you have to write here is,you have to write double colon,and then hover all right and then after,for example,this is a black color and i am writing,here red color,and this is again white text color,remain void so let me save these changes,once saved then let me refresh this page,all right so let me hover over it,so actually this is not applied yet,so wait a minute i have to add only a,single,column and then after let me save this,changes,and let me refresh this page,so it is not applied so that means we,have to write here important,and also right need to write important,here,and let me save these changes now,and let me refresh this page again,now you can see that the hover color has,been applied,so basically the problem here is like,sometimes what we will,be having is like background color is,already added,uh in any other css file or any other,uh place so we we are going to override,that css value i mean we have already,the background color and we are,trying to add the new background color,and this is called as overriding,so for that to forcefully forcefully,edit that specific color we need to add,here,sign of exclamation then important so,in the same way for example you are,adding this,these two properties of css into your,code and still not applied,once you are refreshing the page then,you again need to add here,space sign of exclamation and then i,m p o r t a and d important so these are,the,important thing that you have to keep in,mind while implementing this type of,code,so what i did for now is i have just,added,important sign of exclamation and,important in that way,the property which i have added through,the css,so that is overrided all right i mean,forcefully i have,applied that property so this is the,important thing that you have to,consider if you are working on this,specific issue and,you are thinking that the color is not,going to be changed,so this is the way to modify the color,all right so let me change the,theme again so for example,yeah i'm going to close this page and,i'm going to change the theme this is,the debut theme and,now i am going to modify with the,with another theme which is like for,example brooklyn,all right so let me publish this one,i have published this and then after i,need to,refresh this page again,so now you can see that we have this add,to cart button and buy it now button,and we again need to click on inspect,right click and inspect and here you,will be finding out this specific button,type submit,name add then after we have id here we,have id,we have the class name as well but we,have the id so we can use this id so let,me show you how you will be using this,id,you should just uh one way which i,already told you which was like,button type button name add so that is,already okay so let me show you how you,will be adding that one,so you should click on edit code again,and you will be redirected to the to the,files and folders which are in the,backend of,this shopify store so you have to open,the assets folder,and here we will be having some css,files so you can see that we have a lot,of things here,for example theme.scss,and you have to scroll it down,and down below we don't have any type of,css file except this theme dot,scss all right so for example i am,opening this one,and then after you should scroll it down,and then after at last you have to,add that css so what,i have told you is button then we have,to add here,name equals to add,then after you should add here,background color which is for example,black so let me save these changes,and then after you should refresh this,page,so here you can see that that specific,color has been implemented,and that means this is working fine,another option was like using this,id so i am going to copy this id,and let me uh comment this out first of,all,so i made this comment comment means,this is now no more useful for now,so let me paste this one but before,writing this id we have to add here a,hash symbol so hash,this is also called as pound inside of,it again we are going to write,for example,background so first example i am writing,here blue,so let me save these changes and then,after i am going to,refresh the page so now you can see that,the add to cart button color is,background color is blue now,and i am also interested to change the,color,so which is for example white so this,would be helping us to,change the text color of this specific,uh button,all right so let me refresh this page,again,and here you can see that add to cut,card buttons and this is,looking really great for example i am,hovering over it and,interested to modify the color on hover,so you can also do like that you should,again copy this whole bunch of code and,then after,you should paste it down below and here,you can write,hover,and for example on hover i am interested,to keep it red,and white let me save these changes,once saved then you should refresh this,page here,all right so here you can see that when,i am trying to hover over it,then the background color has been,modified,modified with the red color so this is,really simple if you are trying to,implement in the way which i am,suggesting,so this is also helpful if you are,considering this type of way all right,so this code is really simple you should,just,make sure that you you are going to,you are going to avoid the mistake of,spelling because in some cases if you,are non-technical you are not,aware of coding then maybe you are,missing the semicolon or this column,or there is any uh spelling mistake so,this is important,let me save these changes and let's see,with any other theme so first example i,am closing this one and let me,consider another theme,so there are a lot of other themes so,you already know that these are free,for example we have simple theme and let,me,publish this one,and then after i will be considering,that one and let me,refresh this page again,now you will see a different user,interface and here you can see that,in the simple theme we have this type of,cart and,buy it now button so let me inspect this,one,and here you can see that we have again,the same thing button,type submit name equal to add and then,id is little different,earlier id was long id and,currently you can see that this id is,little shorter,so again what we will be doing here is,we will be again clicking on action,then click on edit code and then after,we will be redirected to the same coding,part of this,shopify theme backend,and what we are interested to do here is,we are going to,uh open the assets folder and down below,we will be having theme.css,file so you should click on it,and then after i am again scrolling it,down,in the last and,at the last i will have to,add some lines of code,all right so let me add so the first,option was i already mentioned you,button,then name equals to,add so this was the first option,for example i am writing here background,red color of text should be,white and let me save these changes,then after you should refresh this page,currently you can see that this was,white,and after refresh this is black,i mean red color all right so that means,the,background color has been modified the,other option was like,we have id equals to add to cart so i am,going to copy this id,and i am no more using this specific css,i am going to comment this out,comment means this would not be used and,i am going to add a pound tag and then,we have,add to cart all right inside of it i am,again writing,background,now for example i am writing here blue,then,color should be white,and let me save these changes,so once saved then let me refresh this,page,now again you can see that we have a,beautiful add to cart button which is,blue in color,so for example on hover you are also,interested to modify,this one so what you will be doing here,is you are going to copy this one,and paste it down below and,this time i am for example writing here,c y a and c on and this is,for example black color and,what would be hover i mean,when we will be hovering over it then it,should be modified so let me save this,changes,and then after let me refresh this page,so here you can see that when i am,hovering over it then,the background color has been changed to,see on,and and the text color is,black otherwise this is blue in color,all right,so this is really a great thing that you,have learned today,so if you are still facing any issue,because you have different theme and you,are not able to,modify the code or maybe the code is not,affecting on this,so you can connect me i will be adding,the contact details below in the,description or maybe you can ask me the,question in the comment section so i,will try my best to,give you the reply as soon as possible,so,thank you so much for watching this,video and don't forget to subscribe,and like this video so thank you so much,once again see you in the next video

Congratulation! You bave finally finished reading how to change the color of shopify add to cart button debut theme and believe you bave enougb understending how to change the color of shopify add to cart button debut theme

Come on and read the rest of the article!