Skip to content

Use custom CSS

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

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.