You’ll inevitably want to customize your Shopify store. Even with purchasing a premium theme, retailers tend to want to adjust things like fonts and layout. Unless you have some experience as a developer and/or have worked with Shopify before, you may not know how to edit your Shopify CSS.
In this article, we’ll show you how to edit your CSS in Shopify, where to find your CSS files, and we’ll cover the basics of CSS preprocessors (SCSS) supported by Shopify.
How to Edit Shopify CSS Files
Step 1: Log in to your Shopify admin dashboard
Step 2: Click “Online Store”
In the left navigation of your admin dashboard, click on “Online Store” underneath Sales Channels. This will open the dropdown menu with additional options and load you into the “Themes” page of your online store by default, which is the first options in the Online Store menu.
Step 3: Choose the theme to edit the code
The Themes page will display all the Shopify themes currently installed in your theme library. Your currently active theme will be displayed at the top, designated by “Current Theme”.
To find your CSS file, you need to click on the “Actions” button. In the dropdown menu that appears, click on “Edit code” to access the Shopify source code.
Step 4: Navigate to Assets
In the Theme file editor that opens, you’ll have a second vertical navigation with collapsible categories. The top two, Layout and Templates, will likely be expanded by default.
Either click the folder icon next to these two categories to collapse them, or scroll down until you see a menu category for “Assets”. Click on “Assets” to expand the file list.
Step 5: Select your CSS file
The name of your CSS file will vary depending on the theme you use, since file names are set by the developers of the theme. In the example provided below, you can see there are actually two CSS files: one for gift cards, and one for theme.
Your file names may be different. However, your CSS file(s) should be easy to identify by the included “scss.liquid” extension in the file name like those in the image above (Shopify Liquid is the template language used by Shopify).
Once you’ve identified your CSS file, click it to view the contents in the editor.
Editing multiple CSS files in Shopify
At the top of the editor you can see a tab with the file name and an “X.” This allows you to open more than one file at a time in the editor, and switch between them by clicking on the individual tabs – much like a web browser. Like a browser, you can click the “X” to close each tab.
When working in tabs, remember to save your work when switching between files or closing tabs to avoid losing any edits you’ve made to your CSS files.
Making sense of your CSS files in Shopify
Because the CSS contains style information for your entire Shopify store, there are quite a few lines of code. In the Debut theme from Shopify, for example, there are 7,532 total lines.
Each line is numbered, even the blank ones, to act as reference points when you’re editing your CSS and trying to find specific CSS references.
CSS files are also broken into sections using comments so it’s easy to find the style code for specific areas of your Shopify store as you scroll through the lines of code.
Before you edit your Shopify CSS once you locate the code you want to change, we recommend making a backup of your CSS file. If you copy the contents of your CSS file to another doc, like notepad, it will be much easier to reverse any changes you make.
Preview your CSS Edits in Shopify
The editor has a “Preview” button located at the top-right of the editor. Make use of this as you work through CSS edits to see how your changes look.
It’s a good practice to preview and test your work before you click “Save” to ensure your changes don’t “break” the visual appearance or user experience of your online store.
How to create a new CSS in Shopify
If you want to build a new CSS file in Shopify, you can do so by clicking “Add a new asset” in the left category navigation.
This opens a new window with the options to either upload an existing file from your PC or create a blank file.
When creating a new blank CSS file, you’ll be prompted to enter a name for the file. Use a contextually-relevant and simple name, since this is the file name you’ll use in your .liquid files when referring to your CSS.
If you’re making a new CSS file to replace an existing one, be sure to rename the old file and/or make the appropriate change to the code in your theme files that reference the old CSS file.
What is CSS in Shopify?
As CSS has grown increasingly complex over the years, it has become harder for retailers to cleanly and easily maintain stylesheets for their stores. One of the top issues is that standard CSS doesn’t offer any simple approach to reusing code segments within a stylesheet.
For increased functionality, developers began using CSS preprocessors.
These preprocessors are a scripting language that will take syntax and convert that into regular CSS syntax. Conversion is a necessary step since browsers will only render original CSS.
And everything processes behind the scenes once your scss is in place. Shopify uses a built-in compiler that takes the Sass (scss) syntax and converts it so it can be rendered.
Why use CSS in Shopify?
There are a number of benefits to using sass/scss in your Shopify store. The CSS alone is critical to rendering the layout and visual style of your site. Scss is a step up. If you understand the basics of CSS then you know how to create a scss file.
The learning curve for picking up on the other features and benefits of scss are minimal.
Here are some of the key benefits to working with scss in Shopify:
Variables are included
Variables are one of the biggest benefits. With variables, you can store a set of specific values to be reused throughout your files. This eliminates a lot of the tedious and repetitive coding with traditional css sheets.
Nesting is possible
Nested syntax is a big deal when working with code. With nested syntax in scss, you can more effectively target elements and write code that performs wider functionality while being contained within other pieces of code.
The ability to nest code offers a number of benefits on its own including:
- Syntax that’s easier to read, follow, and understand
- Code that’s easier to maintain and modify
- Eliminates the need to rewrite selectors countless times to get the same desired effect.
Use Mixins like functions
Mixins are the next step up from variables and are ideal if you have segments of code that are used repeatedly throughout your stylesheet. Instead of replicating variables, you can use mixins to define how content is displayed.
Then, simply refer to that mixin in your code.
Here’s an example from Mugo:
Getting started with Sass and CSS in Shopify
Even if you have little to no experience with CSS or CSS preprocessors, the language can be picked up quickly. In fact, Shopify offers a multi-part guide that covers everything you need to know about getting started with sass/scss. W3schools also offers a tremendous, in-depth course to help you quickly learn the ins and outs of CSS. With those tutorials and our simple guide on how to edit CSS in Shopify, you’ll master control of the visual style of your store in no time.
An Easier Way to Customize Your Store
Even when you have a good understanding of CSS, you might find it difficult to make your store look exactly the way you want it to look. You might even need to hire a web designer, which can be quite expensive.
You could save a lot of money by using the Shogun page builder instead. With its drag-and-drop "what you see is what you get" interface, Shogun makes it easy to customize every part of your pages, and it's much more affordable than hiring a designer.