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 are 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 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 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 CSS file contains the 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 preferred approach to applying custom CSS styles. To follow the preferred approach, refer to 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 theme.liquid file.

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

    This reference is typically located near line 65 in the theme.liquid file.

  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
    {{ 'custom.css' | asset_url | stylesheet_tag }}

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

  6. Select Save, then preview your store.