how to edit shopify stylesheet

okay this morning we're going to talk,about how to actually edit the CSS,styles inside Shopify now typically we,talk about how to mount it by liquid,code and how to change things in the,theme settings but the other day I,realized that it might be a good idea,just to show you guys how to change,basic CSS inside the dashboard so if we,hop over to the screen now I'm not going,to go over how to use the Google,inspector and how to actually learn CSS,I'm gonna make the assumption that you,know how to modify CSS and you're gonna,need to know how to where to go inside,Shopify in order to make the actual,change because the dashboard is,constantly changing and they're making,updates to it things can move around and,they may not be where you would expect,them so if we're on our dashboard and we,go to online store and then we come up,with the drop down below it,we'd have themes and if we go to themes,we're gonna get all of our current,themes that are installed on our store,now Shopify allows you to install,multiple themes so that you can test out,different versions of your website,without modifying the live version so,what I usually recommend is you take,your live versions so say for example we,have pipeline version 4.3.2 and we,duplicate it the reason we want to do,this is in case we make any errors,inside modify the CSS we don't want it,to affect our live users now I'm working,on a demo store so it's not that big of,a deal because I'm the only person who,can see it but once you launch your,store you want to be able to go and make,changes to your online store and then,once all your changes are approved and,they are set properly you can go back in,and you,and publish them so after I've copied,out my theme I usually like to go and,rename it and I rename it to the name of,the theme and I call it development now,the way I work is if there is a,development theme that exists on the,store that's where I'm making all the,changes once I'm finished with the,development team what I will do is I,will publish the development theme I,will rename the active theme to the date,that I published it as you can see down,here and then I will rename development,to active so if it ever gets unpublished,I know exactly which team needs to get,published back up again to restore,changes so now that I've created,development theme I want to go to,actions and I want to go to edit code,and what this is gonna do is it's gonna,take us into the theme editor now it's,gonna take us not to the theme,customizer it's important not to get the,two confused so if we have a look at,customize theme we can see the theme,customizer which is where Shopify really,directs you to try and go and make,changes to your site because it has all,of the built in sections that are,already available for shop by which a,drag and drop which are easy to use but,for advanced users you want to be able,to get to your coat and that is done,through that Actions menu now once,you're into the theme editor you have a,bunch of folders on the left hand side,which make up your feet and what you,want to be going to is you want to be,going to the assets directory now the,assets directory basically is anything,that includes CSS JavaScript or any,images that you're gonna be pulled into,your website that are and if are the,theme dependent so if we're in the,assets directory we're gonna look for,the theme dot s CSS dot liquid this is,where your theme,styles are going to be posted now I,caution you you shouldn't make any,changes to the theme s CSS file if you,can help it what I would recommend is,you go to the bottom of the theme file,and you add either any of your custom,CSS is below the line that's placed in,there to add custom CSS code or you,could do what I like to do which is,create a separate asset called custom,CSS which allows you to put all of your,CSS that you're gonna create independent,of the theme CSS and the reason you want,to do that is because the theme file,contains a framework and you don't want,to be modifying frameworks because if,you modify frameworks it can have a,knock-on effects down the line this is,something that you're probably familiar,with if you work with CSS before so what,we're gonna do is we're gonna actually,include a file here so that we can go,and make the changes so let's go and,write the code to include a CSS file,we're gonna write import quotation marks,number neo custom dot CSS and then we're,to compose it now once we've written,that we need to actually go and create,the file so let's create the new asset,on the left hand side we're gonna create,a blank file we're gonna choose the kind,of file we're gonna create a CSS file,and we're gonna call custom dot CSS now,for the advanced users you can code you,can create s CSS file so if you want to,use variables you can create a liquid,CSS file so it will render the CSS file,and pull in your liquid variables before,it pumps it out the sake of this demo,we're gonna stick to just a CSS file so,that I can show you how to make changes,we're gonna add that into our assets and,you can see it's now come up here and,we're going to save our theme liquid,now we're going to add a custom CSS on,to our custom CSS file just to show that,it's working this way we can confirm,that we couldn't go in at any time and,make changes to our custom file and it,will update on the website so what I'm,gonna do is I'm gonna do body and then,I'm gonna do order four pixels solid red,and what this is going to do is if this,is connected properly when we refresh,the page we should get a solid red,border that goes around the whole thing,so if i refresh our theme we don't see,anything show up and the reason we don't,see anything and show up is because we,actually have to preview the theme so we,have to hit the preview button on the,top because we're working in a demo,theme we need to be able to see our site,that's not live and now you can see,there's a nice red border around the,whole outside of our website which means,down anything that we modify inside the,custom CSS is going to make,modifications to our website so that's,basically it I hope this was a helpful,little tutorial that I show you guys how,to edit CSS inside Shopify don't forget,to Like subscribe to this video I make a,new video every Thursday if you guys,have any questions or something that you,would like to have the answers posted on,this channel for Shopify please leave a,comment down below I always read those,comments and get back to you with,whatever I can to help you can also,check out my website where I have,complete blog posts and screenshots that,go through all of the videos that I've,created on this channel that's it for me,hope you guys are having a good one and,we'll catch you in the next one,you

Congratulation! You bave finally finished reading how to edit shopify stylesheet and believe you bave enougb understending how to edit shopify stylesheet

Come on and read the rest of the article!