where to change colors on contact us button for empire theme shopify

hi guys hope you are doing well so this,is the special live stream which is for,the users who are not uh familiar with,the coding but still they have some,issues which i will be solving in this,live stream so the biggest issue most of,the users were facing is that they have,the shopify store,and they have different themes installed,in them i have published some videos but,those are not matching uh with their,requirements why because,for example they are interested to,modify the background color of a,specific button in their store but the,video i have created in that i use,different theme so this is the special,video in which i have covered almost uh,four to five themes uh which in which i,will actually show you the proper way,that how you can change uh or maybe,modify the text color of the button or,maybe the background of the,button,so,you can imagine that for example you,have multiple buttons like checkout,button add to cart button buy now button,maybe contact us button so those buttons,if those are looking more attractive,then of course,users are much more interested in your,store while visiting your store why,because everything matters a lot so in,the similar way if you are creating a,good environment or maybe good user,interface user experience for your,customers then it is better of course,so uh you can see that i have opened uh,some stores here,uh which are using different themes,so let's see how we can detect that,which theme they have installed so for,example this is the store i am going to,inspect the code so you can see that i,have to right click and then click on,view page source and here i have to,search,team,and you will get to know that down,below here we have,a shopify theme so this theme is,brooklyn all right so in this store,uh the,theme used is brooklyn so let's close,this and let's see in this,store that which theme they have used,there is a shortcut key that is ctrl u,but you can also right click and click,on page view,view source so again i am going to,search theme,and,then,press the enter key and then you will be,redirected to,the place here you can see that shopify,theme name impulse so this is the,impulse theme which is installed in this,store,and this is the store in which i am also,interested to see the theme name,so you can see that,yeah here they have actually hided the,theme name uh they have changed the,theme name here but this is using,actually the wookie theme all right this,store,and this is another store let me see the,team name again here so this is down,theme so down theme is the latest uh,theme which is provided by the shopify,itself so if you have down theme then,this is also a good opportunity for you,to watch the complete video and observe,that how i am modifying the things,so let's start with the down theme then,later on i will be uh including other,themes that how you can modify in them,also but make sure that the process is,quite similar why because,each of the theme is using button tag or,maybe input tag so how you will be,adding the css is similar all right so,first example i have this shop all,button or maybe,if i am clicking on any specific product,then you can see that we have add to,cart button and buy it now button,all right,so what i am going to do here is first,example i have add to cart button and i,am interested to change the,background color and text color of this,button so how i will be doing is i have,already,opened the dashboard here you should,click on actions then click on edit code,then after you should scroll it down and,here we have layout in the layout you,should go to theme dot liquid so in most,of the themes you will also find this,specific uh file,and maybe theme dash template dot liquid,or maybe theme dash layout.liquid but,this kind of file you will be finding in,the first folder that is layout folder,down below you have to find here body,tag so first of all if you are clicking,head tag,and wherever this head tag is closing,after that the body tag is opening so,you should,add some code just before the head tag,closing closing head tag i mean,so this is close head tag close head tag,means angular bracket forward slash head,and then angular bracket close so here,you should add some tags,so for example style,then after you should write here close,tag of the style,make sure that don't make any mistake in,the spelling because these are,this should be the exact value exact uh,characters all right,then after what we are actually doing is,let's say example i have this add to,cart button so i am going to right click,it then click on inspect,please don't afraid from the coding this,is quite simple let me show you how,so once i right clicked and,opened this specific thing,and,another way of finding this element is,click on this inspector and click on,this button,again you are redirected to this,specific thing so here you can see that,we have button uh element inside of it,we have type submit name add class,this class we have right now product,dash form underscore underscore submit,all right,so we have to,find a uniqueness in this button,and that uniqueness is first example if,i am going to the buy it now button here,you can see that in the buy it now,button,they have already,something unique maybe,here you can see that this button is,actually here and they have also given,some class which is shopify dot payment,dash button underscore underscore button,and then after shopify payment button,and there are some other,uh other properties but for now for,example i am interested to modify this,specific name add add,so this name is different,and if you will see,this button,this button don't have any name this has,type class,and they don't have given any name all,right,so using this name,i am going to add some property,so how i will be doing is i should write,button,then after submit,then we have add so we can actually test,something here,for example i am interested to change,the background color the background,color red for example and text color,should be white so here you can see that,if i am interested to change the font,size the font size should be for example,12 pixel i am writing,and you can,change,by using arrow key so here you can see,that i can increase and decrease the,font size,and finally what you will have to do is,you should go again here,and here i will be adding same thing,which is button,element name is button,then,this is square bracket and nam equals to,add,this is the name of this button here you,can see that nam is add,all right,i have added name add,then after i have to,write here opening and closing curly,brace,and inside of it i will write the same,thing which i have added here,so you can also copy and paste from here,i am going to copy these properties all,the properties which i have added there,and then finally i have to paste that,code here,so here you can see that i have pasted,that code and then let me save this,changes,for example i am refreshing this page,again,and here you can see that those changes,applied,so you can see that how simple it was,all right,this was quite simple,in the same way,let's say example i am interested to,modify the background color of this by,it now button you should click over it,and here you can see that we have this,specific uh,element button type button,as you know that,in most of the cases the button type is,button so you should not use type you,can use a class name or maybe the name,of the button so for example in this,case i don't have the name so i am going,to use this,class name and before doing anything,firstly i need to write some code here,so for example i am writing here,background,green,and color is already a white so if you,are interested to change the color you,can also change the color this is red,but,white is fine so i will no more change,the color,then after you can also add the font,size for say example i am adding here 12,pixel,and then this is around 22 pixel,you can also compare this this is 25,pixel so we should also,keep it same,this is 25 pixel,all right if you are thinking this was,more then you can reduce,otherwise you can keep it 25 let's say,example i am writing here 25,then after you should uh,you should actually uh see the class,name so here you can see that shopify,dash payment button underscore,underscore button all right i am going,to copy this first class before the,space you can see that here after this,selected area we have space but before,space you should copy these,and then after you should,paste it here but make sure that this is,the class name so i will be adding dot,dot means full stop then after i am,going to paste it,and then after you should add the curly,brace,all right,and finally i will copy this code from,here,and then paste it here,and now you can,see,after,clicking on save changes,let me refresh this page,so sorry,you can see that the changes are not,affected that means,we have to see here here you can see,that color,uh background color color and font size,not,applied yet,so what was the problem,so we have to write something like,important,first example i am writing here,important but before writing important,first of all you should write sign of,exclamation that is,shift 1,and then right here,important,all right,and this important you should apply to,all these properties,this is helping us to override the,changes all right so let me refresh this,page,here we go,now you can see that first example you,modified something and that is not,applied so that time you should write,here important important means you are,giving the priority to this specific,change,otherwise the css which has already been,added by default that would be applied,so this is quite simple to understand,that if you are modifying something and,that is not affected online at that,moment you should write important but,before important you should write sign,of exclamation,all right,so this was uh quite interested,let's see any other theme so for example,this is another theme that is wiki theme,and let's move to any specific,any specific product page or maybe here,also you can see that add to cart if i'm,clicking on it,then you will be redirected to this,specific page,and first example i am clicking on add,to cart button,and view cart button,all right so here you can see that,proceed to checkout button so first,example i am interested to,change the color of this proceed to,checkout button how i will be adding is,i will again right click and click on,inspect so here you can see that i have,written right click and inspect and,another option is click on inspector,then this element would be detected,and here you can see that just like,the previous theme,there there was the name of,nam equal to add but here you can see,that nam equal to add let me show you,once again,in add to cart button you have seen that,this is name equals to add let me zoom,it out,here you can see that nam equals to add,but here you can see that,name is different that is,nam equals to check out,so same thing you have to write,how you will be writing here,button nam equals to check out and then,and curly braces and inside of it you,will again apply the same changes,first example i am interested to modify,in this so how i will be doing it click,on it then on the right hand side here,you should click,this is element that's dot style and,here you can write,background for example red,or maybe you can also,you can also choose any other background,color here you can see that we have,different background colors,for example brown is suitable for this,and the color is already good,if you are interested to change,something else for example font,weight,mode weight means you want some,thickness,here you can see this is creating some,thickness,so this is quite simple you only need to,write,a,button let me show you how you will be,writing,copy this maybe,for example i'm just giving you the,example because i'm not going to the,back end of that theme,and here you should only,add,checkout,and inside of it again you should copy,these changes,and,write it like this,so here you can see that this is quite,simple if those changes are not applied,then you can again write here,sign of exclamation,and important,all right,fine so this is quite simple so this was,the example for the wookie theme that if,you are interested to modify the,checkout button or any other button,so the same thing applied over there all,right,so let's move ahead with this theme this,is quite uh fine actually this is quite,awesome you can see the look and feel of,this,shopify store so actually these are all,the stores in which i am mostly working,so clients are hiring me to do some,modifications and something like that so,first example this is also one of the,theme and i am interested to,change the add to cart button all right,so let's right click,and see,see here this is the id,and,there may be something else,data default text add to cart,so they have actually given us some id,and actually the button is this,so you can also click here but make sure,that uh this was important that button,there should be a button or maybe input,all right so i have clicked on this one,this means that inside of text,that element is this one and this is the,button which is,the which is you can say that over of,that specific text,so here again you see that name equals,to add so the same kind of css you will,be adding which we have just added,before,and in this theme this theme was down,theme so in the down theme and in this,uh theme,this is impulse theme so both have the,same way to change the change and modify,the,background color of,add to cart button so this is quite,simple so for example you are interested,to write some css over here,maybe you wanted to change the,background color so background,let's say example,you want yellow,and color of the text should be,red,so you can see that same thing happened,here you can copy this code and paste,the same way which i did in the other,theme,so this is quite simple if you don't,know coding there is no need to learn,more you only just follow this these,steps and you are done,so this was about impulse theme,let's move ahead with another theme,so which theme this is let me see,yeah this is the brooklyn theme,so how i will be doing this,let me show you a quick thing,actually this was the button i have,modified and you can see that there are,some bubbles around this button so i,have implemented this if you are,thinking that you have also needed such,kind of bubbles so i can do it for you,so i have some code and,that stuff i can implement so how much,attractive this button was all right,so i did some coding spent some time and,finally i modified in this way and,client was really happy all right,so let me show you how we can modify the,background color of this one if we are,interested too,so again right click click on inspect,this is by now button so here this is,the text and this is the button,again the name of this button is same,that is name equals to add in most of,the cases buy now button our add to cart,button has same name,in all the themes because this is a kind,of format which most of the theme,developer are following,so for example i am interested to modify,this to,black,just a moment,okay i modified some additional code so,maybe,this has some problem but wait a minute,let's see,yes perfect so here you can see that i,have added only black then it was not,modified i have written sign of,exclamation and important and then it,was working,all right this is quite simple,so you can imagine that how simple it,was to change the,background color of this button,all right,so first example if i am going to buy it,now,and here you can see that we have update,card button and checkout button all,right,so if you are interested to change the,update card button for example again you,should inspect click on this and here,you can see that this is the button and,this name is name equals to update so,the same thing you will do that is,for example i have written the code,button nam equals to add but here the,name is different which is name equals,to update so instead of,writing,add you should you should write here,update,and then you can add the code inside of,it,let me show you how,again first example i am interested to,change the background color to,maybe pink,can you see,maybe this is little,different so,yeah this color is good,and here you can see that this,this background color has been modified,very easily so again if that would not,be applied you should write here sign of,exclamation important and that would be,done,so really simple all right,so uh again you will copy the code from,here and paste it uh again in the theme,dot liquid file all right so this is,quite simple so we have explored uh,brooklyn theme,uh impulse theme bookie theme,and this one,was this,sorry this was down there,so if you are facing any issue still you,can ask me below in the comment section,and accordingly i will be making some,more videos on the i will come in the,live sessions where you can ask me the,questions because this is one of the way,where i can transfer the knowledge,because in most of the cases people are,asking me questions in the whatsapp,messages and those questions are really,simple,so this is one of the best way where i,can actually share my whole knowledge to,most of the people because individually,if i am trying to help you then this is,quite uh quite tough for me,so this is one of the best way which i,can do to help you out with everything,so finally,uh this is not a kind of promotion but i,am just suggesting you that i have,created one website which is,keywords.com,and here actually i am providing some,useful tools which are really simple to,use for example a keyword volume checker,and if you are a youtuber then these are,also helpful this is keyword volume,checker for example for example i am,asking here for books,so here you can see that adds data for,the keyword like,average monthly searches average cost,per click and add competition and there,is the graph of,the complete year that how much searches,were there in specific month,and highest touches and then this is,also one of the table which is also,reflecting here,the data then related keywords if you,are a youtuber then you can also explore,these tools which are like tags,generator for example books,and rate keywords and these are the tags,if you want to filter if you want to,copy so you can do everything you can,download you can reset,everything you can do then description,generator so this is the description,generator for example you are making,some youtube videos so this is quite,simple format which you can follow and,this will help you to create,the youtube video description quickly,then extract tags for example you have,some urls of the other people videos and,you can write here for example this is,one of the video and i am extracting tag,from,this video this is already published on,youtube but i am interested to fetch the,tags of this video so i just written,here the url,of this video and then clicked on,extract tags and those are over here,this is quite simple and thumbnails if,you are interested to download the,thumbnail of these guys,you can also,download using this for example click on,here then save image,so this is one of the way,then we have some other like hashtags,you can imagine that now the trend is,that mostly people use hashtags so in,the videos so these are the hashtag,generators and there is type words,competition volume and all and title,generator channel audit everything you,can explore on these specific things,the,readability checker domain search word,counter for example hello everyone,how are you doing so this is one of the,best thing which you can actually,start with so here you can see that in,the real time you can count the words,and sentences and paragraphs and,characters so these are simply uh,these are actually free of cost so you,can explore and you can use in your,websites or maybe for daily use you can,use,so,thank you so much for watching uh me and,you have a great time,so thank you so much once again see you,in the next video but before that if you,are,new on this channel then please,subscribe this channel and go through my,channels playlist because there are a,lot of useful videos related to shopify,freelancing coding,yes problem solving and stuff so you can,explore that channel if those videos are,useful for you then you can watch it,so thank you once again see you in the,next video

Congratulation! You bave finally finished reading where to change colors on contact us button for empire theme shopify and believe you bave enougb understending where to change colors on contact us button for empire theme shopify

Come on and read the rest of the article!