Use custom CSS ​

Cascade theme uses a base minified CSS file named base.bundle.css. This is the base CSS file that's used for core theme styles. You can edit the base CSS file, but we recommend using the blank custom CSS file that's included with Cascade theme.

Use the custom CSS file ​

If you don't need to change the existing CSS completely, but you want to override some of it or add your own CSS - add your customizations into the custom CSS file.

To add your customizations into the custom CSS file:

1. Open the file named layout/theme.liquid.

2. Locate the line that references the custom.css file.

   Approximately, this reference should be located near line 144 of the theme.liquid file.

3. Uncomment the lines {% comment %} and {% endcomment %} by changing the code as follows.

   Change the code from:

   liquid

   {% comment %}
   <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
   {% endcomment %}

   {% comment %}
   <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
   {% endcomment %}

   To just:

   liquid

   <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

   <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

4. Add your CSS into the assets/custom.css file.

   Note

   Styles in the assets/custom.css file are loaded and applied after the base.bundle.css files.

Override section specific styles ​

Some CSS files are only loaded inside the sections that require them.

For example, the CSS for <example> is only loaded in the file block-example.liquid. To add new, or override existing, <example> styles, add your CSS into the corresponding liquid file directly - between two <style></style> tags. The same process applies to other sections that load specific CSS styles.