shopify how to change body text color

what is up guys today you're going to,learn a few techniques to completely,overwrite the styling that is set by,your theme,and be able to go beyond what the theme,settings allow you to change,because as you probably know things like,colors and fonts they're under here,under theme settings and they're set,globally across your entire site right,so you set a few primary colors like,your brand colors you set your secondary,colors and then like all the buttons and,stuff they automatically get these,colors applied to them right so these,buttons this is like the primary this is,a secondary and you don't have specific,control over which button is what color,but what if for example you want to make,this specific this add to cart button,pink or maybe you want to change the,heading size of your product title or,this vendor or maybe you want to change,the heading size in your footer anything,anything across your site if you want to,change something specifically this video,is going to show you how you can kind of,surgically go in and change that,specific thing without affecting other,things because that's kind of the issue,right you're going to love this video,because it's going to give you a lot of,control,a lot of very fine control over your,design,however,with great power comes great,responsibility,and,it's going to be very easy to also break,your theme right not completely break,your theme but,you know effect more than what you,intended to affect right so you want to,make one button pink,and you end up making like all your,buttons pink across your store which is,not what you want probably so i'm gonna,teach you a few ways that you can like,really carefully go in and make those,changes the examples i'm going to show,you are focused on colors and fonts just,because these are the most common,things that people want to do and the,most simple things to to do to teach you,but really if you do have some more,advanced knowledge of css then,you have no limitations really and you,can use the concepts that i teach here,and combine that with your css knowledge,to just change anything you want across,your store so anyway with all that said,let's jump into my computer and get,started okay so the first thing you want,to do is look at the page that you want,to be editing and have that open in a,tab on your browser,and the second thing you want to do is,go to online store themes and then under,actions click edit code to enter the,code editor we're looking for,theme.liquid you can search it but it's,actually right here theme.liquid this is,the main file that contains your entire,store all the other like section files,templates they're kind of like being,included inside of theme.liquid in this,file there's always a css file which is,usually called base.css,right um but it might be called,global.css anyway it's your main like,your core css file in dawn and in all,the free shopify 2.0 themes it'll be,called base.css but yeah you want to,find the main css file for your theme,copy and paste that onto the next line,and we're going to call it custom.css,or something that may be even more,memorable for you so that you know that,like like this is the file that you were,creating and editing right later when,you forget the name custom.css might not,be good enough i'll call it edcustom you,might want to call it your name or your,store name,anyway hit save and then we're actually,going to create this file okay so right,now we've like linked it into our theme,but we haven't created it yet so we're,gonna go to assets folder,and we're going to add a new asset as,you can see base.css is already in here,and all our css files are in here,click add a new asset and,create a blank file the extension is,going to be css,and the file name is going to be,whatever you named it right,so i hope you see what we've done we've,created a new empty css file which is,where we're going to write our styling,rules and we've like included that file,into our theme by linking it here in,theme.liquid so now we can write css,here and this is going to have an effect,across our entire store now if you're,completely new to css then this is like,not the ideal tutorial for you but i'm,going to try and make it as simple as,possible as straightforward as possible,and i'll give you a quick recap as well,or if you're someone who hasn't touched,css in a while you know how does css,work well we target an element right so,one of the common elements that you,might have on your store is the h1 right,or the h2 h3 these are heading heading,levels so you type h1 and then you open,up these curly brackets,hit enter,and then you write your rule here,you're gonna write color,and then this,colon and then,red,and then semicolon am i getting those,names right,semicolon colon okay,anyway that's the basics of css right,another another common one that you,might see is like p for paragraph right,in your html and to target all,paragraphs we can do this we're just,gonna write color,green,and this will literally make all,paragraphs across our entire site green,and like you usually wouldn't want to do,this so instead you would usually use,the class name right,now let me show you a simple example,i'm in google chrome and if you right,click and hit inspect you can see the,code of your web page,and so this,button,has a class,of button,and another class called button primary,right and so what the theme does is,attach to button primary it's got like,this color right so,this is simplified but it's kind of,written like this but in primary,color in a dark green or whatever that,color currently is,right,and this you can ignore you can name it,any way you want so you can use,underscores you can use dashes one dash,two dashes this is just part of the name,the only part that's important here is,the dot dot means it's a class right,this is a class and we also have,sometimes id,so this particular block this image with,text it has an id,and to target an id,we would use the hash symbol,and then if there was like,okay this id is kind of complex but we,can actually target it,like so,and then we would be targeting,specifically this block okay so that is,a brief recap of css,lastly um one more thing you write the,thing you're targeting right then you,hit space so there's a space you open,your curly braces and then your cursor,will be in the middle of them so just,hit enter and because you're in a code,editor it'll automatically do this right,try not to do like i don't know,something weird like,like this,and then writing your color red here,and then like that's just messy and and,difficult to read,this is a little bit better but still,like the standard is kind of to do this,where this is on the first line this is,on the last line and you write your,stuff here and this is indented as well,don't do this,because that's going to be hard to read,you want to see what like these rules,are inside of this right,so when you have like a lot of rules,then it's easy to see like what's going,on here what i'm saying is pay attention,to formatting it's kind of important for,readability and to make sure that you're,not making any mistakes,especially leaving off these things that,can screw up your css,right,accidentally skipping that that can,screw up your css and you'll notice the,color changes as well when i do those,things that's a hint that you might be,doing something wrong so yeah that,that's my recap of css for you,okay let's get on with it i don't want,to make this video too long um let's say,that we want to change the add to cart,button to be pink okay again we're going,to hit inspect right click and inspect,in google chrome to see what classes are,on this button so what we can target,and yeah this is going to be a more,practical example so the first class,that i see is product dash form,underscore underscore submit right and,then we have like generic classes like,button button full width and bottom,primary now what do you think these,classes are for,i would say that these classes like,button button full width these aren't,just used on this add to cart button,they're used across the site so we,should be careful about targeting like,those buttons because we might change,multiple buttons across the site that we,don't want to change,but this product form submit,the naming of this class just tells me,that okay there's probably no other,button across the site called product,form submit so i'd say that's pretty,safe to use i'm going to copy and paste,in here put a dot at the beginning to,say that in css that we are targeting a,class with the name of product form,submit,space open up your curly braces and here,we're going to write background,dash color,hot pink lovely color hot pink,save,and you should see,that your button has turned pink,now what we're doing here is we've just,made,the add to cart button across all our,products pink now if you want to also,change the text color because you might,want to do that if you made it like dark,or something then you want to use color,okay so we have on buttons background,color and color and the color can be you,know what's a good color with pink i,don't know yellow as you can see i am a,developer not a designer that's probably,a terrible combination,oh that's ugly,so anyway you get what i'm saying here,right this is how you make a global,change,next,let's say that for example i want this,button to be pink okay inside the image,with text section well i'm going to show,you how to do it wrong okay so we look,at this button and like,okay there there's no,there's nothing like product form submit,there's no unique class on it right the,only classes we see on it is button and,button primary so like let's try that,just as an experiment,let's target button and make button pink,right,so color,sorry,background color,hot pink and let's take a look at what,we've done,okay so this button is pink but also,this button is pink right and this,button is pink,and now this button is pink okay like,all buttons across the store that are,using this bottom class,they're all pink because the bottom,class was not intended like for that,purpose it was intended to actually make,the style of our button like the the,border radius here the the width of the,button you know the spacing inside of it,all of that stuff is attached to the,bottom class so we can't just hijack the,clasp like that so we need to find,another way to do it and the way we can,do it is say we want to effect only,buttons inside the image with text,section right,so in css,what you can do is you have like the,parent right or in html there's,something like the parent,and then everything like this is the,parent this is the child of that parent,this is the child of that parent this is,the child of this parent right,you look at the parent and i'm seeing,this class called image with text and,probably it's only used by the image,with text section and so i'd say that's,a good thing that i can use i'm going to,write dot right for class and then image,with text,button and so what this is saying is,that,all the buttons,inside of the image with text section,are going to be pink,so now when we refresh you should see,that this button is still pink this,button is still pink but when we hit add,to cart we now see that these buttons,are back to normal okay and that's,because they're not inside of the image,with text section,now the next thing that i want to do is,what if only this button needs to be,pink like only in this image with text,section i want a pink button but in this,one i do not want a pink button i want,this to be normal so what i'm saying,here is i'm targeting,not just the image with text section,type,but this specific instance of the image,with text section okay this specific,placement on this specific page because,what i've currently done is that even if,i add the image with text section,on the home page then the button is,still going to be pink as you can see we,don't want that we want to target that,specific instance on the product page,where i'm using it here and to do that i,want to grab the id of this section in,shopify whenever you add a section to,the page it's also,generated with a unique id,so if we go all the way up we look at,the parent the parent and we we find the,actual section right the section is not,always going to be section like this it,might be a div with the id of shopify,section template,number number under score number number,and it's going to have a class of,shopify section right so we can tell,that's the section and this is the,section id,now,if,i use that instead of this image with,text,let's paste this here and let's use hash,to signify that this is an id not a,class,then it's saying that all the buttons,inside of the section with this id,will be hot pink and since there's only,one section the id is unique there's,only one section with this id then,finally we are targeting this specific,button on this section on this page and,no not any other section now i'm just,going to give you another example with,fonts and font sizes then i'll explain,to you also the dangers of this and what,you should be careful of when you do,this so let's take a look at this image,banner and let's say that this isn't,large enough for us we have some basic,settings on the uh,the size of the text i think in the,image banner yeah we can choose medium,large,but what if we want it larger than that,i don't know i can't think of a better,example um right now it doesn't really,matter we're looking for,like we can target this class of banner,heading but obviously that would change,each instance of this image banner so if,we use the image banner section on,another,page or if we use it again lower down on,the home page,then this change would still apply,right so,you know first we would do that banner,heading right and say we want the font,size to be,you know 70 pixels or,larger than it is now,and by the way how do you check what,size it is now well we're going to take,a look at this,you've clicked on the heading 2 like the,element itself,and then here you might see font size,calc var,you know all of this stuff so it's like,a calculation and there's a variable,called font heading scale it it's not,clear you want to know in pixels right,you want to know in pixels what the,actual font size is,just click on this tab that says,computed and,here you can find the font size that is,in actual pixels this is the computed or,the the like,the calculated,font size after like this calculation,with the variable has been completed so,it's 52 pixels 52 pixels and here we are,changing all banner headings to 70.,let's hit refresh and here it's 70. this,will be affecting all of them and we,know that now and so we're like okay no,i want to be careful i want to do it,only on this specific instance of this,section on the home page,so you find the section you go up up up,until you find okay main this is the,entire site and then section okay this,is the first section this is the,next one the third one,and here we have the id of this section,and again you're just gonna go,id like hash for id and then paste in,the id so now we're targeting the banner,heading inside of this section okay so,now you've learned how to apply specific,styles to sections based on their id,okay so now you can surgically go in and,modify just that section,you're like okay sweet that's awesome,there seems to be no downside to this,it's pretty safe well actually i would,use this sparingly if i were you and,only in situations when you really need,it and here are some of the downfalls,okay here are some of the issues that,can go wrong let's go to our product,here and i'm simply going to,remove this section the one with,the pink button the one whose id we're,targeting,i'm going to remove this section,and i'll remove this section say i made,some changes say for a month or so you,didn't want to show some promo block and,then later you want to show it again and,you're like okay image,with text and you want to add it back in,and well,it's a different id now it's a different,section like you killed that section and,now this section has been reborn with a,different id and now this code that you,wrote it's actually completely redundant,it doesn't work there will never be,another section with this id again so if,you want to make this pink again,then you're going to have to take a look,at the id of this section,grab the id and update that id so that,can be kind of hard to manage okay for,this reason it should be used sparingly,and it's also a good idea to add,comments inside of your css so that you,know what's going on,so if you don't know how to add comments,in css,we can write a comment and then you,highlight it and you press command or,control and then slash,and comments well if you're not familiar,with this it's like just a comment for,another developer it's ignored by the,computer it's not,read by google chrome by the browser,when it's outputting your site it's just,a comment for yourself for another,developer and here i would write,something like,this targets,the first promo block the first image,with text promo blog or like you know if,you're using for sale like sales block,on the product,page right so if you remove it like,later you come back to this code and you,know what what this does and you know,that you need to replace this okay and,then the other thing the reason why i,told you to make a custom css file like,this,instead of adding your css to for,example like adding css to base.css or,into one of your component css files is,that when you change themes or when you,update your theme,you're gonna lose this file okay or,you're gonna lose the changes if you,added them in base.css you get a new,copy of your theme it's not going to,have the changes and then you're going,to have to go into each one scroll to,the bottom find whatever changes you,made copy them into the new base.css on,the new theme no,just in the next,version of the theme or in the new theme,that you're using go into theme.liquid,create another custom.css and then paste,in your custom css or just import the,file so it keeps all your code changes,in one file really nice and contained,and easy to move across,okay and lastly i know i'm gonna get a,common question and that is you've added,something you've added a rule and you're,targeting a class and nothing is,happening it's not changing so there's a,few things that could have happened here,you could have just misspelled the name,of the class but i'm guessing,that the actual issue is a lack of,specificity so,let me show you something like this if,we copy this then we write product right,because um,like say this is the entire this is the,class that is,the parent of the entire product block,so we do product product form submit and,we're gonna make this like green,what do you think is going to happen in,this situation actually let's let's,remove this product for now what do you,think is going to happen here is it,going to be pink or is it going to be,green well the answer is it's going to,be green because this comes later this,comes after this right now what do you,think would happen if i did this,product dot product form submit pink and,then this is green what would happen,well it's still hot pink,and just to prove it if i remove that,dot product,it's going to be green,right,so what do we see here it's that the one,that is lost takes priority unless,this one is more specific right,specificity in css is like by how many,names do you call something it's like if,i call you john,there's a lot of john's but if i call,you john smith or that that narrows it,down a little bit but,basically if your style is not taking,effect if nothing is happening then try,to increase the specificity so if i'm,looking for this product form submit,just look for a class of a parent right,so you can go with form you can go with,um you know product info wrapper we can,write something like this,dot product dot product info wrapper dot,product form submit so that's three,levels of specificity like this button,which is inside of this wrapper which is,inside of product which is inside of,body maybe bodies like the whole html,file,right so that's a high level specificity,and that's more of a chance that your,css is going to take effect,now the last thing which i'm not sure if,i should even really show you,because it can really mess up your store,but it's kind of a nuclear option is,this,you can at the end of this after the,like the color,but before the semicolon,you can write exclamation mark important,okay and that is going to completely,override anything else,okay even if,something has greater specificity,so actually i'm going to add this here,this has way more specificity so it has,like more strength than this one,but we write important sorry that's not,in the right place,it's after the color we write important,and this is going to take priority even,though this is stronger and has more,specificity,and we can see that it's green important,should be used really sparingly it's,kind of like a worst case scenario it's,it's a nuclear bomb okay the reason is,that there's a really high chance that,you'll overwrite something and something,was going to be green that you don't,want to be green so guys that's it for,today's tutorial i hope you learned,something that is really useful for you,but don't overuse this and yeah use it,only when you really need to make sure,you keep all your code nice and neat if,you're interested in stuff like this,then i recommend joining a shopify diy,group on discord is like a group for,my subscribers basically for anyone,that's interested in customizing their,shopify store and as usual leave a,comment if you have any questions and,i'll see you next time

Congratulation! You bave finally finished reading shopify how to change body text color and believe you bave enougb understending shopify how to change body text color

Come on and read the rest of the article!