Appearance

Use custom CSS ​

Note

This is an advanced customization guide that requires editing theme code. These changes 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.

Override section or block specific styles ​

To override styles for a particular section or block:

  • Select the section or block in the Theme editor.

  • Select Custom CSS from the section or block settings menu.

  • In the CSS field, enter custom CSS styles to apply only to the current section or block. For more information, refer to Shopify help: Add custom CSS.

Apply custom styles to your entire online store ​

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

Modify the theme's default CSS file ​

You can replace the theme's default stylesheet completely (not recommended).

Baseline theme uses a minified base CSS file named base.bundle.css. This CSS file contains the core theme styles. You can edit this CSS file, or Create a custom CSS file.

Create a custom CSS file ​

Important!

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

To replace the default stylesheet with your own custom CSS file:

  1. In the Code Editor, expand the Layout directory, and then open the file named theme.liquid.

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

    This reference is typically located near line 46 in theme.liquid.

  3. Comment out the line that references the base.bundle.css file by changing the code as follows.

    Change the code from:

    liquid
    {{ 'base.bundle.css' | asset_url | stylesheet_tag: preload: true }}

    To:

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

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

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

    liquid
    {{ 'your_custom.css' | asset_url | stylesheet_tag: preload: true }}

  5. Upload your custom CSS file to the theme's Assets directory.

  6. Save your changes, then preview your store.