Today we're going to learn:
How to edit CSS styles inside Shopify.
Okay, this morning we're going to talk about how to edit the CSS styles inside Shopify.
I'm going to assume that you know how to modify CSS and you're going to need to know where to go inside Shopify to make the actual change.
To begin I always start by making a development copy of the live theme. This way we can check for errors and test our changes without modifying the live version that our customers are actively using. When everything is approved, we can publish the development theme.
I have a system I like to follow. First I make a copy of the live theme by clicking Actions > Duplicate.
On the newly created duplicate theme, I click Actions > Rename.
After the theme name, I add (Development) and click Rename to signify this is the theme I’m working in.
When the changes are complete and we’re ready to go live, I click Actions > Publish and change (Development) to (Active).
Afterward, I’ll rename the previous active theme by replacing (Active) with the date it was unpublished (01/23/18). This way you have a dated archive of all the previous iterations of the themes in case you need to revert to an older version.
Note: I didn’t name these properly in this example - oops!
Now that I've created a development theme, I want to go to Actions > Edit Code to enter the theme editor.
All these folders on the left-hand side are what makes up your theme. We need to look in the Assets directory, primarily contains CSS, JavaScript or any images that you're going to pull into your website that are theme dependent.
In the Assets directory, select theme.scss.liquid.
Caution: I do not recommend making changes to the theme.scss file if you can help it. The theme file contains a framework that can have knock-on effects down the line when tinkered with.
Solution: I recommend creating a separate asset called Custom CSS which allows you to put all of your CSS that you're going to create independent of the theme's CSS. AT the bottom of our theme.scss.liquid file we’ll write some code to look for our custom.css asset. Click save.
Now we're going to add a custom CSS onto our custom.css file. For the sake of this example, I'm going to make a solid red 4 pixel border around the window.
body {
border: 4px solid red;
}
Note: Because we’re working in a development theme, we have preview the theme to see the changes.
Now you can see there's a nice red border around the whole outside of our website, which means now anything that we modify inside the custom CSS is going to make modifications to our website.
