Appearance

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.

Our themes use a minified css file named theme.min.css . This is a plain CSS file that's purged of unused styles, and it's minified to reduce the file's size. Using this file is the best option for most merchants, as our file optimizations can provide a slight performance boost.

However, you can continue to make your own changes and customizations. You can add your own CSS file, just for customizations, or use the unminified version of the file.

Add your own 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, continue using the minified file, and add your customizations into a new CSS file. The CSS from both files will be used together.

  1. Create a new CSS file.

    Create a new file named custom.css in the Assets directory. If you plan to use Liquid inside this file, name the file custom.css.liquid.

  2. Point the theme to the new CSS file.

    In snippets/style-tags.liquid, point to your custom CSS file by inserting the following line at the end of the file:

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

Note

This file is not minified. The file contains unused styles that might be useful for customizing the theme. For example, the file includes a complete set of grid system classes.