How to make CSS customizations

Adding your own custom styles and CSS overrides to the theme

For developers and to make minor CSS style modifications, use the Code Editor and add your custom CSS overrides at the bottom of theme.css located in the Assets folder.

How to open the code editor

Click on the ellipses (three dots) icon at the top of the Theme Editor to view theme actions, choose Edit code.

Alternatives and "theme.dev.css"

As you have probably noticed, "theme.css" is minified and you won't be able to easily change the styles. This is where the "theme.dev.css" file comes in handy.

This file is not minified and holds the exact same code but in a much more user-friendly layout. While you can certainly change the styles in it, these changes won't take effect on your live store. The reason for this is that this file is not read by default.

To activate it, you need to access the "theme.liquid" file and replace the instances of "theme.css" on lines 9 and 44 with "theme.dev.css".

Note: Minified CSS is slightly faster so using "theme.css" is also slightly faster.