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

To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Alternatively, you can change the existing (default) CSS file completely, by creating and adding your own custom CSS file (not recommended). Exhibit 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, or Create a custom CSS file.

Create a custom CSS file ​

To change the existing (default) CSS file completely, create and add your own custom CSS file.

Important!

The following is not the recommended approach to applying custom CSS styles. To follow the recommended approach to applying custom styles to your entire online store, refer to Theme settings > Custom CSS.

To create and add your custom CSS file:

  1. Open the file named theme.liquid.

  2. Locate the line that references the base.bundle.css file.

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

  3. Comment out the lines that reference the theme.liquid file by changing the code as follows.

    Change the code from:

    liquid
    {{ 'base.bundle.css' | asset_url | stylesheet_tag }}
    {{ 'base.bundle.css' | asset_url | stylesheet_tag }}

    To:

    liquid
    {% comment %}
 {{ 'base.bundle.css' | asset_url | stylesheet_tag }}
 {% endcomment %}
    {% comment %}
 {{ 'base.bundle.css' | asset_url | stylesheet_tag }}
 {% endcomment %}

  4. Add a reference to your custom CSS file into the theme.liquid file.

    For example, below the line you commented out previously, add the following code:

    liquid
    {{ 'custom.css' | asset_url | stylesheet_tag }}
    {{ 'custom.css' | asset_url | stylesheet_tag }}

  5. Upload the custom CSS file you referenced into the theme's Assets directory.

Override section specific styles ​

To override section specific styles, select the section you require in Theme editor. Then, select Custom CSS from the section's menu options. In the text box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.