Adding Custom Styles to Shopify Sections

Introduction

In this video we're going to talk about different ways that you can add custom styling to your Shopify theme. So, in some instances we might want to extend the design or change the design of just one section. And so in other instances we might want to change all of how a specific design is presented for something like a header or a button. And we don't want to share the same settings maybe we're seeing in other sections.

So this video is going to cover how to do that both from a little bit more of a simpler approach where it would be more of a merchant maybe who's a little bit technically comfortable, has good backups in place and can use the new CSS styling that we can access directly in the customizer. So we're going to talk about that, what it looks like, how to use it, and then what it actually does because it's pretty similar to what we would do if we would actually drop into code for a couple of things.

Also talk about when we are changing code, how we can target and call out the specific sections or items that we're wanting to change and how that might need to be different than what you're doing. So that way we don't run into problems down the road if the theme is duplicated or something along those lines. So hopefully this is helpful. Let's talk about changing up the styling on your Shopify theme.

Customizing CSS Section in the Shopify Theme (Dawn 8.0.0)

Okay, so I'm jumping into just the newest most current version of Dawn that's available is 8.0.0 I believe here. And so here relatively recently. And this doesn't have to just be the newest version of Dawn or whatever, even if you're seeing a vintage statement stuff right now, folks have access to this. So I'm going to pull up a rich text section cause I think this is one of the easier ones to work with here. And we'll go ahead and click into this. So on the customizer side here, hopefully y'all can see this okay. But we have this option now... let me just try to this up a little bit. Maybe it'll be better if we put it all on one side.

So if you scroll down in the bottom, you'll see it's kind of hitting at the moment, but there's this little custom CSS guy here and if you click into this, you'll see that it will add custom styles and then import to this section only. So again, this is really specific and targeted. So that is to say in this rich text setting, if we change this, it's not going to change every single section for rich text where like for instance, this header is something that we're going to target here. So if you want to do that, it would be more appropriate to change, like the actual code on the classes or if you do have actual theme settings in here, if you were trying to change specific colors or the font and things of this nature.

But at least for now, we're going to go ahead and just jump in here. And so if we want to target this, this is where it gets kind of complicated if you're not a dev and so trying to figure out, well, how do I target this class specifically. So if you're at that point, you don't know... I'm going to cover something real quick, but just make sure anything that you do, make sure you're working on a backup so, you don't break your store here. But if you're just testing this out for the first time or something along those lines, but most developers, they're going to be able to do this.

Adding CSS Rules Directly

So if you can't dive directly into code, one of the ways for you to find what kind of HTML do we need to target here because if we're doing CSS, we have to target our styling based on specific selectors.

So really target it and then we set at whatever we're wanting here. So this example that they have here, this is an H2. H is a header and 2, so semantically H1 is the top, so that would be the title of the page or whatever, be the very first and then kind of works its way down from there. They also typically as well from a visual standpoint, H1 is largest, H2 is next largest, and so on and so on as you go down.

So in this example though, let's just test out something. So let's just guess that this is an H2 and so let's say H2. Let's do these fun little brackets and then let's do color. Let's do something super easy to find. So hot pink, boom. Cool. So this worked out pretty well, mainly because it actually was an H2.

We didn't need another selector and specified it perfectly so, that you can see changed the color directly. Go ahead and save this because we'll come in and take a look at this. What if it's not as simple as that. So for instance, oh yeah, maybe you guessed it was an H2, but you're not sure what this is down here. Now most developers are going to know what the kind of style tag this is, but without telling you here, let's go ahead and take a look at that. So I'm going to go ahead and view this theme just so that way we can take a look at some stuff. So if you're on a Mac, you can do command option i, you can also right click and then hit inspect.

These are all options that are going to give you this little guy over here. This is just what is called web developer tools. And so it pops over here and this is literally the HTMLs on the page. Now if you want to call out and find a specific section. In this instance, you can go up to this little indicator here and it will highlight different things on the page and you can see off to the right hand side on the code how that changes around. So what I want to do, if you click on this, you can see here, all right, H2, all right, that's great. We could have targeted this more specifically if we need to with an H2 and span, but H2 covered it fine and that's great, but we want to find out what this text down here is. So if you click on that here, again, this is just like a selectric tool here. We can hover over this and you can see over here in the code, and this is nothing fancy, anybody can take a look at this.

So you can see here that there is a P selector. So P stands for paragraph. So again, to support the same kind of thing that we're going to do here, we can just do P and then we can do something like font weight bold. And you'll see here that this changed all of this. Now if you're confused about the different styles and things like that and how to select those things, that's where you should be really careful about how you're editing these sections. If you don't know what that is, you need to learn about basics of web development or talk to a developer, someone that can actually do this stuff.

So that's not the purpose of this demonstration, but if you do have a snippet of design or something like that that someone has given you that you want to test out in a backup theme or something, you can see here this is a live theme, but this is an unpublished store that I do just for demos here, work out of a backup, make sure it doesn't break your store.

So you can see over here, I'll go ahead and refresh the page. Our styling has been applied. Now to understand what this is doing is pretty similar to how one of the approaches that we can use with web development on Shopify themes works, where if we want custom styling per section, all that that section does, where we scroll down here in the code is at the end of each of these sections.

So you can see it closes off, like there's section we highlight the next one, it's the next section. It appends what's called a style tag. So a style tag is just that CSS. And you can see here it gives us a whole bunch of info. Sorry, it's not easy to see here. So I'm going to hold this out a little bit more, but you can see that it talks just exactly about the styling items that we added in here.

So you can see Shopify section template and it's got a whole bunch of stuff in here. And then here's our role, H2 and then color hot pink. Then it has another item where it's got this little hashtag or Octa Thorpe I guess is what it's called. Shopify section template, bridge text. And there's our selector again, the P tag and then font, weight, bold. So what this is doing is it's actually appending this because in CSS there are rules with code about how specifically you style something. And so when we're styling it based on an ID and then whatever the actual element is, it applies it directly to that element.

Now the interesting part about that since they are using that selector is let's say we wanted to add another rich text. And you'll notice here that it does not style this one the same. So this is where it's going to be kind of a limitation to the current presentation of how this theme stuff gets updated here. So here, pull this down. And so this is not going to change necessarily these other sections.

So if you're want to change all of your rich text headers, these H2 headers, or if you're want to change all of the paragraphs here and how that's presented, that's where you're going to run into something where it's going to either be a ton of work on your end to copy and paste this stuff's sections over and over again. Or what you should more than likely do is edit the actual classes for these specific sections. If you can't already do that in theme settings, ideally we get as far as we can in theme settings because the theme developers have already built in tools for you to be able to do that.

However, we need to extend that or customize it a little bit more. That's when you have to add some additional options here to change things. So that's at least how to use the custom CSS directly in the Shopify theme. So going into those sections and scrolling down to the bottom or custom CSS is and then adding your style tags directly in here, or I'm sorry, not your style tags, but your actual CSS rules specifically in here. Style tag gets append at the end of this section and then applies those directly.

So really specific, really helpful provided we just want to change styles in those sections. And then the real nice thing about this is... and if you're a developer, this is a gotcha moment when it comes to CSS themes. Back out of here real quick.

Duplicated Theme With CSS Rules

The good thing about this is even though it is using these, so it actually changes the code to where when you duplicate the theme, so you can see here on the new theme, this will actually carry over, okay, which is really nice because if you just tried to write specific CSS rules in here and you just targeted incode this section before, you actually would have needed to do that with a liquid specifier, which is just more code talk basically rather than doing it with, you can't just write a CSS rule for this section template because if you duplicate it, this section template actually changes.

So you'll see here this is a unique kind of type number here. It will change when you duplicate the themes. So I've worked on themes before where some devs not really understanding how Shopify works, they'll target and style these themes specifically or these sections specifically. But then when the theme gets duplicated, so something new gets added or whatever, that's when you run into these problems where the whole thing just breaks because they were the things that they selected or tried to target specifically for that styling no longer exist either the themes duplicated because all the numbers and stuff change or whatever. So the specifiers change. When the specifiers change, then those rules no longer apply. So yeah, so that's how to use the section there. You're in here and you click onto this, there is a learn more option. It talks about different things with adding custom CSS to your theme and all this fun stuff.

So do give it a read over if you're messing around with some of this stuff, it is a consideration to make sure you're not really getting too deep into the weeds if you don't understand how CSS works and how it interacts with your theme and those sorts of things. So if my hopping back and forth was super confusing and you're not really sure, you should probably leave it to a dev. If this helped increase your understanding, you might be okay with kind of playing around with this. Either way, make sure that you do mess around with this in a backup team. And then at the very bottom of this, it does have some great information about basic CSS information, so you can check that out too. So nice edition Shopify, this is really handy, really neat. I think it'll be helpful for merchants for sure.

Traditional Theme Developer Methods

Okay, so we talked about one of the ways to edit styling and stuff was to actually go in and test out this new custom CSS option and we saw that it actually added style tags directly after this section to cover that. So what I'm going to do now is we're going to talk about ways to do this with code. So there's a couple of different strategies that I like and you can kind of be the judge on how you want to proceed when you're doing this. So I don't know, one simplest things that I think aside from messing with the block ID or section ID in order to style specific elements is to add something along the lines of an ID tag directly in there. This can be as simple as in your input settings, adding a section option. So I'm going to show you what that looks like real quick and then we'll cover pretty similar to what the text editor option looks like.

Adding a Unique Identifying Tag

So you can see here, I'm going to use rich text because it's just real simple already. But let's say we want to come in here and we just want to... sorry, yeah, click into this here. And so this is going to be the rich text section. We're going to move this to the top. And so what we're going to do is we're going to dive in a code here and let's just go ahead and pull up that section specifically. So go to your sections and you're going to look around and we're going to find the rich text section. So here, see here rich-text.liquid and what we'll notice here, a couple of different things that are going on but not really paying attention to that too much. You can see here that there is a style tech that gets thrown in here. They're using that same kind of option.

Again, this is something that we'll use later on, but for now I want to talk about one of the easiest things that I think to do and that's add an ID to this section. So in this instance what I would like to do then, let's going to go ahead and identify the highest up order div here we've got here. And so you'll see we've got this div class of isolate and then unless section settings full width, blah, blah, blah, blah. Okay, so what I want to do, let's just go ahead and throw in if statement here... and my keyboard has gone to sleep. Here we go. All right. So if let's say section.settings., oh, let's call it something simple, just section ID is not equal to blank, then we'll go ahead and do ID equals and we'll do section.settings.sectionid.

Now, this is probably a really bad name to call it because this isn't really something we want to do in the future, but just because it might be kind of confusing. So section ID is different than obviously section.id, but for the purposes of the demonstration, this is what we're going to use because it's simplest. I also added a space here, so if it does go ahead and add this, at least we'll get a space between the class and the ID as well. Something to kind of bear in mind that'll pull out if you're using the white space controls too. So bear in mind that. So we're going to scroll down here into the schema. So once we see that, but what we're going to want to do, and I always put this at the very top because I think that's what makes the most sense.

So we're going to want type, text and then id, so this is what we're actually going to name it. We already named it earlier sectionid and then we're going to have some other information in here. Like what we want this to be called and so we'll just say styling ID, something like that. I wouldn't put anything in the default or anything like that or whatever. If you want to, you can add some additional info here to help clarify. So something along the lines of appends ID for specific styling. And then don't forget comma here at the end, go ahead and save.

Okay, so this has now been saved. We'll jump back into our editor here and we'll do a refresh. Oh yeah, let's go ahead and reload. And so now all of your rich text sections will have this styling ID up at the top. So you can see here it's in all these, in which case, what we'd want to do then is we'd go ahead and call out something specific. So something along the lines of, I don't know.

So let's just put our id okay for now. So this doesn't really matter if you're familiar with CSS, editing, CSS, you'll see what this looks like. We'll go ahead and view and then the pull up in the code here for this section here. Want to take a look what this looks like. You'll see here in this top level, our ID is now appended here. We don't have anything for this ID or this section down here.

So you can see it just has this isolate class over in here. Sorry if that's hard to see. So this is working for us. We do now have an option. So the coolest thing about this would be we can come in here and I'm just going to do some stuff real fast here for this guy here. Whoops. And the theme editor, you're classes are all the way over here. So if we go down to base, let's do custom and then so we're going to want something like our id and then we'll have H2 for instance. And now we'll say color and then let's just do green and comment this out. So now it's going to look around for a ID that says our ID and then H2 is under our id. And then it's going to use the color green.

IDs are great because it uses a pretty specific styling option here. And so let's go ahead and refresh this page and you'll see here that this has changed. Now to turn our text green, the nice thing about this is again, it's not going to do section per section per section or anything like that. This would go through that and only do the specific sections we wanted. So when your theme is duplicated too, it's going to carry this over as a setting too because we've set this specifically in the section ID itself.

So again, real simple option here where all we did here was say, Hey, if there is a section Id actually set, go ahead and make this whatever the section ID is going to be and so on and so forth. And you know what? Actually that's not perfect for those of you that caught that great job. Browser, thankfully is smart enough to figure this out here, but I should have put that in quotes. My band, refresh. You can see here, still rendering how we want it to, so section ID and that's just what I named it. This can obviously be whatever you want to call it. Here's the text id. Real simple. This can be done for any kind of section.

The only time where it maybe gets a little tricky is just if there's already an ID called out, a lot of things will do this where they will actually call that out specifically at the section level. So it'll call already the section ID or something along those lines. So it can be targeted with things like JavaScript and different things we've got running. But this works really well where we can now write our own custom ID or custom fonts and stuff from there. And that's just directly with something that's been added. Okay, cool.

Writing Custom CSS Directly in Shopify Theme

Okay, so we just talked about an option where you can go in and you can add your own ID and use that in conjunction with the base styling in Dawn, or you can add your own custom styling sheets to change the font, color font sizes. You can change padding, margin, whatever you want. Basically you can just write it specifically to that section here. So that's one way to do that. The other option would be to consider adding in some specific stylings directly into these sections.

So this would be really common if you're trying to build in controls for a customer or they want to change things that are specific to these sections. So what you would want to do then let's take for instance, let's target specifically as paragraph. We've already done stuff with the headers, so let's go after the paragraphs here. So what we want to do then is let's add a color option here where merchants can just change this themselves.

The way that we're going to do that in this instance, if you go over to the docs, you'll see here that we're just going to grab and add an option here for the input settings to include a color option. So just go ahead and grab this super handy here and then this adds this little guy here. You seem all over the customizer where you can do that. So we're going to jump into these section settings. And I've already targeted this specifically. This is just under the block. We have a text block specifically and rich text here.

So what we're going to going to do is just go ahead and drop this guy in. And, let's just change this to text color just to make a little bit more plain and we'll do body text color and then I don't actually want to include a default because we're only going to want an included as an override into the theme. So if you do include a default every single time it comes in, it's going to have that. So again, just kind of use it as you will.

But I'm going to scroll up here and we'll find in the settings here. Well first let's just go ahead and save this. So we added that color of settings option. And if we do a refresh for this section here, you'll see that we now have this body text color. Cool. Only downside though is going to be if we select something right now, it actually doesn't do anything, right? Okay, maybe I'll save.

Yeah, nothing going on there. And let's do a refresh over here. Nothing going on over here. This is not working. Not necessarily. We just haven't hooked up the body text color setting here to an actual section in the theme. So let's go back and we'll scroll through here. One button, one text. Cool. This is what we want right here. So you think this option would be pretty much the same, right? Let's just, instead of changing the total styling, let's just throw in a style tag that was simple enough before. And so we've got a div with a class of rich text and rte and then it appends a P tag, right? Let's go ahead and drop that guy in there and we'll do color and then we just have to do section. Whoops, wrong section, block.settings.textcolor, okay, because that's what we named it down there. So let's go ahead and save that guy. Cool, it's saved. And now let's do a refresh.

Hey, awesome. It changed this, but there is a problem here because it changed this other rich tech setting too, right? Yeah, I mean something funky with the customize, let's go through. Nope, it's definitely changing that. So if you want to take a look at this, you'll see if you get into the actual web dev tools here, we'll take a look at this P element. You can see, okay, here color, but it's not set this somewhere and then oh, rich text and okay, the color is set, but it's this purple color, but we didn't set that in this section down here. So why is it being applied? This is being applied because what we did was, for one, we didn't set our color tag, so that's where we got the empty color set. We didn't set it down here. It's being called either way. So that's why that's there at least.

But up in here, this style tag, we're editing the class directly. Oops, it's going to be easier to see this way. So we're editing this class directly. So we set it in the settings here to show up as this purple-ish color or whatever. And so everything with div with these two classes, this rich text underscore, underscore text and RTE and paragraph, it's going to always show up here.

So what we need to do is we need to target a unique identifier specific to these sections. There's a couple of ways to do this, but what I would look for is something that's already in the theme. So if you scroll up here, really easy to see once it's rendered as post like surfing through code here to get around if statements and win switch statements or whatever. But you'll see here that there is actually a section template and then an id, and then it looks like the padding.

So what we would want to do then is we need to add, sorry, a specific selector here to call out that says, Hey, we only want to change it for this section specifically. So the way to do that is going to be, scroll up and we can't really see all you will here. I don't think I can adjust the width of this, but if you scroll over, you can see that section ID is getting called right here. So in this guy here we've got this section ID padding that's called up above. And this will call out that section specifically. Now if there's not already a section option here, what you can do is you can add your own call here. So maybe we want it to show up where we would just say section, section.id, but since it's already there, it's not really necessary.

You can just use what's already existing within the theme. Plus code is better whenever we can get away with that. And so if we go back to our section here, what we can do is we can actually append a dot, actually make it so that it's a class that's getting called out. And so now we have this unique call out here. So it's going to say, okay, look for specifically this section with this section id, and then it's going to look for our other items here in order to match that specific block color section setting. So let's save that guy.

Whoops. And we'll go ahead and do a refresh. All right, great. So that seems to have done it because now when we get in here and look at this, it's calling this section Id padding call out specifically, and then this, whereas down below we have unique sections, so it's not going to call this out. And yeah, it looks like we're doing something still specific here where we're getting this not actually to come through. And really what we don't want this rendering out if it's not there, otherwise it's just an empty rule.

So what we want to do, if you go back to the color settings here is check to see what it's supposed to return if it's blank, in which case it will return blank, some of them return nil, different things like that. So just make sure it's specific to whatever the resource is here. And so we'll add this guy.

So if block.settings.textcolor is not equal to blank, then we want that style tag to render ground. Okay? Make sure to close that off just to make this a little bit more clean. We'll go ahead and save command S in the editor here will save it just like you expect if you're on a Mac, command S. So we'll do another refresh here. You can see here we still have our style tag has our color that we assigned it earlier. And now this P tag down here doesn't have a style tag added because there was not ever an option set. Going back to this earlier where when we added this color text setting here in your settings, if you do add like the default in here as well, it will always be assigned.

So I would not have that. It's okay and perfectly valid for you to just have the type ID and label. You can add some additional info here as well, but the default will get around needing to have that way. Whenever you do have a brand new rich text section here, pull this all the way to the top, what it'll do is it'll just make it transparent so that way there's nothing set to the default and means it'll embrace whatever the existing styles are for the theme already set.

Closing

All right, so in this video we covered a couple of different ways and how to specifically change the styling fur sections, both using the new customizer option for custom CSS, and then how developers also can do this by editing code. So either adding a specific option where you can target with an ID or even building in additional controls with the Shopify themes so that way customer can change this themselves and it would update per the custom section settings.

Now, what I would probably do for another video in the future may be something where we can do whole site-wide settings or something like that. So changing the styling, and different things like that specific to all of the H2s, and rich text settings on a theme or building in maybe some controls that your customers would be able to change those directly in the settings for the theme as well, rather than just relying on stuff we can achieve with code. But I think for now, this is really good place, really simple, straightforward ways in how to change this directly per section. And hopefully this was helpful, picked up some tips and tricks along the way. So thanks so much and thank you for watching.

// Video Resources //
Shopify Dev Docs
Adding Custom CSS to Your Theme: 

// General Links //
Twitter
LinkedIn
Instagram

// Hardware* //
💻 2022 Apple MacBook Pro (16-inch, Apple M1, 32GB RAM, 1TB SSD)
🎙️Rode NT-USB USB Condenser Microphone
⌨️ Keychron K4J2 Mechanical Keyboard
🎧 Bose QuietComfort 45
🪑 MUIGELS Ergonomic Mesh Office Chair

*Some of the items may contain affiliate links and it's possible that I may receive a small commission if you use the link