How to edit the CSS on your Shopify website (updated)

in this video I'm going to show you how to tweak the CSS of your Shopify store and it can be really useful for making small design changes to your site the theme I'm using as a demo is the debut theme but the overall concepts that we're talking about will work in any theme as an example let's say that we wanted to make the Add to Cart button a little bit bigger to start with I'm going to right click on the button here while viewing the product on the front end of my website and then in the menu that appears I'm going to click inspect and you'll see this option this inspect option in pretty much any browser that you might be using when you click inspect you'll see a window pop up and this window will either appear on the side of your browser window or across the bottom here in that window you'll see one section that shows you the HTML for your page and then the other section you'll see the CSS for the page and as you move your cursor around in the code here in the HTML you'll see that it highlights different parts of the page to show you which part of the page the code that you're hovering over it relates to so we want to hover over the button part right here and you can click around on different parts of the code and see which CSS applies to it and this will make more sense in just a minute so right now I've clicked on the button code and I can see down here in my CSS that the padding on this button is 10 pixels 18 pixels and what that means the first number refers to the padding on the top and the bottom and the second number refers to the padding on the left and the right so you can see that if I adjust the padding here from 10 pixels up to 20 pixels keep an eye on this button here you'll see I get much larger so right there as I changed it to 20 pixels of padding on the top and bottom the button got much taller you can also do this on the the left and right padding so let's say for example that I changed this padding from 18 pixels down to 8 pixels or up to 28 pixels now it actually didn't change when I went to change that padding and the reason is because we have another line of CSS up here that says max width 300 pixels so this is kind of overriding the padding it's saying no matter what the the widest that can be is 300 pixels so we can make it wider by tweaking that number so if we change - 400 watch what happens our button gets much wider so this Add to Cart button is probably a little bit too large let's bring it down a little bit to 350 pixels wide and let's change the top and bottom padding to 15 pixels rather than 20 and I think that looks a little bit better so what we've been doing is playing around with the CSS in kind of a preview mode but it's not actually changing anything permanently on the site so to change it permanently we have to go into your Shopify theme editor and change the CSS there so before we go over to your Shopify admin we need to figure out what file we need to edit so if you look right here you'll see the name of the file is theme dot s CSS CSS so that's the file that we need to edit and then within that file we need to look for this code which is dot BTN or button and the padding within that within that class so let's go into our theme editor and look for for that class so in your Shopify dashboard go to online store and then we're going to go to actions edit code now I'm working directly in the live theme because this is not a live site if your site is already live and getting traffic then you probably don't want to work in the live theme just in case anything goes wrong so instead of working in the live theme I would hit duplicate and then it'll make a copy of your theme down here as an unpublished theme and then you can edit the code of that theme but for now for this demo I'm going to be working in the live theme so this is the code editor of our Shopify theme and the CSS can be found in the assets folder so we click on the assets folder and then look for that file that we saw theme dot s CSS and it doesn't have the dot CSS on the very end has dot liquid but that's fine it's the same thing so now within this file we need to find the CSS that we changed right here which was dot BTN and it had this padding and it also had something about a min width 750 pixels so we need to keep an eye out for that as well so what you can do is click your cursor anywhere inside the CSS file here hit command F if you're on a Mac or ctrl F if you're on a PC and then in the search field Don BTN and now we just need to click through the file looking at all of the examples of that until we find the one we're looking for all right so I found a dot BTN class that has a bunch of CSS and what I'm looking for is right here so this might be a little confusing but when you see something that says something like include maybe a query or it says something like break point then that translates to the same thing that you see here where it says media only screen and men with or max-width I know that can be a little confusing this might take some experimentation to figure out exactly how it works on your theme so what we're gonna do is we're going to add another line of CSS just below and I'm gonna leave this original line here just in case you need to revert back to it and we'll type in padding and we ended up with the numbers 15 pixels 18 pixels so I'll do that in 15 pixels 18 pixels and make sure to add a semicolon at the end of the line and what will happen is this line of CSS will override this line of CSS anything below in the file will override things higher up in the file so let's go ahead and save and then refresh on the front end of the site and see if that changed took effect all right so you can see that the button is larger and down here in our CSS preview window we see that our padding of 15 pixels in 18 pixels took effect so our change worked the max width changed we haven't made that yet so let's go ahead and do that so what I'm gonna do now is search for this class so I'm just gonna click and copy it then in my theme editor I'm gonna search for it and there I see max width 300 pixels so I'll change that to 350 save it you can click Save here or I usually choose the keyboard shortcut which is command s then we go back and refresh on the front end and now our button has a max width of 350 pixels so it's showing up wider all right let's do one more change as an example let's say for example that you wanted to add a little bit of margin between the product title and the price maybe we think they're just a little bit too close together here and so we want the spacing to be more similar to the spacing between the price and the Add to Cart button so to do that let's start by right clicking on the product title and clicking inspect and it'll select the h1 tag over here in our HTML window which is what we want h1 is usually used for the product title or page title and then here in our CSS we see something that says margin bottom zero so why don't we just try changing that to something like 20 pixels and you can see that immediately it increased the margin right there and that looks pretty good we can just for fun let's play around with us and go up to 40 pixels it's a little bit too much so let's go back down to 20 and if we want to match the spacing down here maybe you increase that just a little bit more to 23 or 25 all right let's stick with that so now that we've previewed the change on the front end of the site now remember that we have to copy that change over to the CSS on the back end of the site we need to find this class in our CSS file so I'm going to select that and copy it and then in my CSS file I'm going to search for it and there it is so we're just going to change margin bottom zero to margin bottom 25 pixels and save and now if we refresh we'll see that change live on the site so that's all there is to it if you want to try editing the CSS of your site give it a go and if you have any questions leave a comment or send me an email you can find my contact information at my website and vision I owe

Channel: Leighton Taylor

Views: 139,607

Keywords: shopify, css

Id: EJi6zfc63RU

Length: 8min 18sec (498 seconds)

Published: Fri Jan 19 2018