Switch Themes Help

# 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.

    2. 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.

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

    Code used to point to a custom CSS file.

Use the unminified CSS file

If you want to change the existing CSS, and prefer to add your custom CSS at the end of the existing CSS file, use the included unminified CSS file. This file is located at assets/theme.css.liquid.

  1. Point the theme to the unminified file.

    2. In assets/style-tags.liquid, remove .min from the stylesheet link by editing the link to match the following:

    Code used to point to a unminified file.
  2. Add your custom CSS into the unminified file.

    3. Add your custom CSS at the end of the unminified CSS file. This file is located at assets/theme.css.

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.

← Use web inspector →