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.

Override section or block specific styles ​

To override styles for a particular section or block:

  • Select the section or block you require in Theme editor.

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

  • In the text box, enter custom CSS styles to apply only to the current section or block. 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 change the theme's default CSS file completely (not recommended).

Shapes 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 ​

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 change the existing default CSS file completely by creating and adding your own custom CSS file:

  1. In 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.

    Approximately, this reference should be located near line 78 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: preload: true }}
    {{ 'base.bundle.css' | asset_url | stylesheet_tag: preload: true }}

    To:

    liquid
    {% comment %}
{{ 'base.bundle.css' | asset_url | stylesheet_tag: preload: true }}
{% endcomment %}
    {% comment %}
{{ 'base.bundle.css' | asset_url | stylesheet_tag: preload: true }}
{% 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.

  6. Save your changes and then preview your store.