shopify how to change the price color on sale products simple theme

hello,so um,um today i want to like kind of make,like a short tutorial like on how to um,um change the price color,of your store without using um like a,specific theme like turbo portland,you can use this method to change pretty,much,anything you know price color what price,color this right let's press color,so this method can be applied to pretty,much anything you know all you need is,um let's say you know well first the,preparation,first you need a chrome,browser right a chrome browser or any,browser that has the inspection,functionality you know this thing the,inspection functionality,the second thing is a little bit of css,knowledge you know um yeah a little bit,you know you don't need you don't need,much a little bit css knowledge,so what's css css is basically,um the style you know the style the uh,the the the formatting,uh the formatting of,um,of a theme you know like uh if you try,to build a build a website,you know css,basically um a file that that determines,uh what things should look like you know,what things should look like what color,should they look like what fonts should,they look like the the size of a font,that's css you know it's just just a,little bit of of css knowledge and then,you're going to need,um the color code you know like um green,color red color,um,then you need like a text editor you,know a text editor like this you know,like basically any text editor will be,fine,so basically the first thing is you know,like you go to your store you know uh,the front page or anything,and you look at it you know maybe it,looks like um,um like uh black right it's it's based,on your,um front pages uh,uh original design you know maybe it,looks completely black or,blue or anything you know based on,uh your original theme design so how do,you change,um the price color right how do you,change,um the cell color like the current price,to be green and the uh compared at price,at red you know the sale price,uh oh or the original price i read so go,to,the page,and click inspection you know right,click,uh right click uh inspect right,and it pops up this um,basically the the console,command,right you click this button,you know you use this to navigate to,the element you want to change right for,example you want to change,this right the,the compare price color right you click,that you know and it will it meet and it,will immediately take you to,um,the section you know the the code,section of this specific element right,this is the html html code section but,you don't need to worry about that the,only thing you need to worry about,you know is this the uh the,the thing that down here right the thing,down here here you know the uh,basically the second the second section,here um so,okay i want to refresh this,let's do it again so,go to the page you want to change you,know um and click the element you want,to change,look at the you know the down uh you,know the the lower section you know the,css section,of the inspect you know and look at the,second okay,the second line here no it says grid,link sell price right,if you click on here,and you can see that you know it says s,screen link sell price that's the,element you know the element name the,variant name,of that code,and you can see the font and color there,so basically you the only thing you need,to do is like for example just double,click this,and change the color right if it doesn't,have a color option you know if it,doesn't have a color option,right you can simply add it you know,simply add a color option like double,click,you know,type color um,column,column and then followed by,um the hask the hex code you know the,color code,of basically anything you want you know,like for example i want red right so red,is,um pound and then f zero zero zero zero,right that's red but if you want blue,you know say blue if you want it to look,blue you can simply just type blue,you know you can just type blue here,you know blue,you know and it'll look blue right or,just basically any color for example um,yellow,color code,right yellow color code it's this you,copy and paste it,you know,and um,and boom it becomes yellow right,so the second thing we want to change is,you know the the sale price right the,the current price,you know the price follow the comparator,price,so again the same thing you know,click you know click this button,and click the element you know it will,take you directly to the variant code,there so this is the gridlink meta,that's the class,and this is the css you want to change,so the thing is like a lot of theme they,don't specifically,has,um how say,like class like they don't specifically,have,um class,that's um,um like uh well,i'll just show you the the the steps,here you know the process and then i'll,cover the you know the complicated stuff,so basically you click that you know the,thing i want to explain is that you can,see that this one has like a very small,rectangle right,but this one doesn't right it's a you,know it's full on full width,you know uh rectangle you know it's much,longer than this,why because it doesn't this theme it,doesn't have,um a variant you know an element that is,specific,you know to the um,well basically um,um,uh specific to the uh the the sale price,you know to,specific to the current price because,what's the difference you know what,doesn't why does it matter because if it,does have a specific,element there it'll change it'll become,the difference between,um say,you know because for example i have this,item that doesn't have a sale price at,all it's just uh it doesn't have a sell,price it doesn't have a comparative,price,it's still green so it'll become the,perfect difference of if you say you,know you want this to be black or blue,you know like for items that doesn't,have,a cell status you know the color will,just be black right and this one will be,still green but it it is you know it,needs to like the prerequisite is that,the theme itself,needs to already has a class that's,specifically define,you know for example this right it's,also like a small rectangle for this one,as well,so,well basically if you you can define,that you can define it but i think,that's like more work you know like more,even more work that needs to be done,um and uh i think it's like it's going,to be like uh getting like more,complicated so um,well well that's the explanation,so then like we want to change the sale,price right so again repeat the step,look at the green like the the class,like the html,code here it's the green link meta and,look at the second,section you know of the css section here,it says green like meta and it says,color again if it doesn't have color,just simply double click and add it,right just add it and it says color and,then change it basically to anything you,want you can say to blue right you can,say like even like crazy color right,blue or well blue color code,right this,so copy and paste it and change it,you know you can see like it's here,so basically right you got this and,changing this here doesn't change the,the theme file you know like at your,store what does that what does it mean,it means that um your store your theme,like it functions on like uh on a,file that's at the back end of the,server right so it's basically the css,file so in shopify,you know you go to online store theme,action,edit code right,and there's a myriad right a myriad of,files here right that just basically,anything you know a mirrored file these,files,um they determine uh they determine,what shopify looks like what your store,looks like right the styles anything,right if you touches these things,you know like if you don't know how to,do it and and you like accidentally add,some like weird stuff into the code,your store explodes right so the thing,here is we want to change the color of,this so it's very simple,you know again right so we want to,change the compare price right so how do,we change that like at the uh,you know the thing files here,so basically click the button,click this,and look at the second section of the,css section here and look at the right,side you know it has the theme scss,click on it,and it will take you to this you know,this source file,here it basically means,uh like this page,renders from,this specific file right this specific,uh back-end server file there you know,and the name is themed.scss.css,you know that is the name all right that,is the the file name that that,determines the actual color the actual,does the work you know the color,um,of this page here right the color of,this page,um,for example like uh the yellow color and,the and the blue color,so then again you go back to the the,theme files here you know you type,theme.scss,the hell was,that yeah theme,css,and then click on the add you know,basically the file you know and you,scroll down,scroll down to the bottom you know view,the bottom like the very end of the file,right,and then well just basically,add code right at the code so,so this is what you can do here you know,again click the element,you know,and look at the second section right,click,copy rule right copy rule,it'll take you,you know copy the rule and then,copy it on the text editor here right,repeat the process for the sell that,price as well,copy rule,and then,paste on the,text editor,and then you,copy this section right copy that,and then you know,just add it at the end of your,file and that's it you know but remember,you know you need the uh the space here,you know the the black uh the what do,you say uh the blank yeah the blank line,here you need the space here and that's,pretty much it,um,well sometimes you will have something,like uh for example,if you copy that it will it won't always,look like only like has one variant here,or and one variant here sometimes you,it would look like this right it would,look like this,so the same thing copy rule,paste so what you basically do,delete anything that you don't want,delete anything because you only need to,change color right,delete anything you don't want right,only leave the color,variant here only look that here and,leave the color of you know yours,well your preferred color code as well,your preferred color code as well to,change it to this,and then copy this to the file and it,will be done,so that um that,wraps up for,the home page,and it depends on your theme so,basically i think like for my thing,there's like basically two sections you,know two sections that you actually need,to change,like two files you need to change like,on the uh the file end you know the,theme,the so the first file is thing that css,liquid right the second file you need to,change the second file you need to,change is,um the product page you know the product,page might look something,something completely different,so repeat process repeat process,click right look at this what's the,class id class,and look at the second section what's,the color,you know and then change the color,change to change it to anything you want,copy the rule,you know,and then cop it copy it and paste it,to your text editor right,um the second thing is,um compare app price which is the thing,and uh look at this and look at the,second section here you know and copy,right change the color however you want,and then paste paste it here so the,thing that would be a little bit like a,little bit different from before is that,um the file that controls the color of,the the sale price and the comparator,price,um is actually not,you know not seen not as scss the liquid,it's actually timber right you click so,then again like every single time if you,want to change something just,look at this and look at this and look,at the right side you know the second,section,click on that and it will say take it it,will tell you what is the back end file,you know back and server file that that,that determines,you know the color of the you know of,the price here you know price tags here,so it says,timber.css.css repeat the process go to,the,theme editor here,type,timber.scss you know.liquid and click on,it all right this is another css file,right,go to the bottom you know the very end,of the the file,you know just basically,copy and paste,the section the section that you just,copied from the inspect right the,inspect console there copy,and paste it you know at the end,right and then say and then click save,and there you go you know right now here,we go right now you have a,um a beautifully,um coded right website that does exactly,what you want right it's red it's red at,compare price and it's,green at the sale price,and uh let's see uh,and for,and for,um items that don't have a cell,status again it determines,uh it is the determined by your themes,codes you know whether it has a specific,class right already,you know there to determine okay this,this,item doesn't have cell status,and they should look black or something,like that you know but i don't think,that's like really necessary you know,you got like rings already down,and uh of course you can add code you,know you can go in there and do the td,word tedious work,at the class define class and add and,then can add code and whatever,but well you know for only very simple,process you know this is how you can,change,the cut the price color of your store,and that wraps up that wraps up for to

Congratulation! You bave finally finished reading shopify how to change the price color on sale products simple theme and believe you bave enougb understending shopify how to change the price color on sale products simple theme

Come on and read the rest of the article!