how to add custom css in shopify

How to Add Custom CSS to Shopify Theme ( Shopify Basic Tutorial )hello friends welcome to our youtub

Code Mart

Updated on Jan 24,2023

How to Add Custom CSS to Shopify Theme ( Shopify Basic Tutorial )

hello friends welcome to our youtube,channel in this video tutorial we are,going to learn how we add our custom,style how we can achieve that in this,video we're gonna learn how we create,the,style seeds file so first of all i am,come to on my theme and here is my theme,i am going to expect this,so,when i expect the top header it shows me,the paragraph,and,here we can add our classes,over the announcement so i click on this,and,add a background style which it's let me,blue,and yeah it's going to blue and changing,the color little bit to,looks better,and yeah is this yeah and think,it's okay fine and going to paragraph,sections where the classes and i add a,color,it's about to,uh,yeah white font size implement in 30,pixel looks great great yeah 22 23,okay i should be implementing font,weight yeah to look some,good yeah 7 700 so here we are inspect,and i just grab this code,css,and going to our,admin panel and dashboard,so here we go first of all we go to our,online store sections,we have to we can,backup to download our theme file so we,store the whole thing file go to edit,sections,after the edit section we have to just,uh close this,extra tabs,and,search the theme,dot css,it should be yeah it's,theme oh it's not here because my theme,is,new theme unpaid so,i can choose a file upload a file or,create a file so basically i create a,file this is a sets so i create a theme,dot css and yeah i created a file for,this,for after the created file it should be,around there,uh yeah yeah that's cortney,close this,yeah assets so base dot css this,provided to our css by,shopify theme and here you have a theme,dot css,so what should we have to do,i have to do,just call css,and you can,see your file it will be there,if i inspect this where you come from,css so they shows the base dot css file,so all over the css comes from basically,base dot css file,so we can implement on that file or we,can add,the css to our new theme file,so i'm going to search which i have,created,i am going to and paste it here then the,save button,and the set is safe go to theme liquid,and here we add our styluses file,and yeah we go to css style style,no it would be css or style okay just,wait hold a second yeah here got the,base dot dsf file,is the the basically structure of the,shopify theme which you provide how to,add your new file so i am going to add,the same,this is the set url which you provide,and this is a style tag going to change,this name my new theme is the theme dot,cs i'm going to save it also in the,section i'm going to say just refresh it,and here we go we can add our new css,we created a new theme file and add the,new css,which is basically override the base.css,okay,so we can add,the css,easily method nothing just create or you,can implement on that,so in this video we are learn how to,implement the css,you

The above is a brief introduction to how to add custom css in shopify

Let's move on to the first section of how to add custom css in shopify

Let PPSPY's experts help you find the best shopify product on your Shopify business!

Find shopify products (It's Free)

No difficulty

No complicated process

Find trending products

3.5K Ratings

WHY YOU SHOULD CHOOSE PPSPY

PPSPY has the world's largest selection of shopify products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

how to add custom css in shopify catalogs

Custom CSS Shopify 2021 ( Shopify Basic Expert Tutorial )

Custom CSS Shopify 2021 ( Shopify Basic Expert Tutorial )

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 add custom css in shopify and believe you bave enougb understending how to add custom css in shopify

Come on and read the rest of the article!