Appearance
Customizing CSS in themes without Sass
Note
This is an advanced customization guide that requires editing theme code. These actions are not supported by Switch Themes or Shopify. We recommend hiring an expert if you're not comfortable editing Liquid, HTML, CSS, and Javascript.
Before you customize a theme, make a backup. Refer to Shopify help: Duplicating themes.
In the spring of 2020, we started migrating our themes to a new development framework. As part of this transition, we also stopped shipping Sass files with the themes. This article explains how to customize the CSS in these themes.
Currently, it applies Editorial version 3.6.0 and later.
If you've customized earlier versions of the theme you may be used to editing a file named theme.scss.liquid. This file is no longer included.
Instead, you'll find that the theme uses a new file, theme.min.css.liquid. This is a plain CSS file that is purged of unused styles and is also minified to decrease file size. Using this file is the best option for most merchants as these optimizations result in a slight performance boost.
However, if you'd like to make changes or customizations, you still can. You can either use the included unminified version of the file or add your own CSS file, just for customizations.
To add your own CSS
If you don't need to make changes to existing CSS but would simply like to override some of it or add your own CSS, you can continue using the minified file and add your own customizations file to be used alongside it.
Create a new CSS file
Create a file called custom.css in the assets directory. If you plan to use Liquid in this file, you can name it custom.css.liquid.
Point to the custom file from the theme
In snippets/style-tags.liquid point to your custom CSS by inserting the following line at the end of the file:
liquid
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">`<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">`Use the unminified CSS file
If you would like to make changes to existing Cascade CSS or would prefer to add your custom CSS at the end of the existing CSS file, you can use the included unminified CSS file. This file is located at assets/theme.css.liquid.
To do so, simply change the stylesheet link in assets/style-tags.liquid, removing the .min so it reads:
liquid
<link href="{{ 'theme.css' | asset_url }}" rel="stylesheet">`<link href="{{ 'theme.css' | asset_url }}" rel="stylesheet">`Note that this file is not minified and also contains some unused styles that may come in handy when customizing the theme, such as the complete set of grid system classes.
If you have existing SASS or SCSS code
If you have SASS code that you used in previous versions of the theme, you can compile it to plain CSS with a local SASS compiler or with an online tool like SassMeister: