Appearance

Use custom CSS ​

This guide describes how to add custom CSS to your store.

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.

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 this file, but we recommend using the blank custom CSS file that's included with Shapes theme.

Use the custom 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 - add your customizations into the custom CSS file.

To add your customizations into the custom CSS file:

  1. Inside the file layout/theme.liquid, above and below the line referencing the custom.css file, uncomment the lines {% comment %} and {% endcomment %}. Approximately, this should be located on line 98 of the file.

    Change the lines from this:

    liquid
    {% comment %}
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
{% endcomment %}
    {% comment %}
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
{% endcomment %}

    To just this:

    liquid
    <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
    <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

  2. Add your CSS into the custom.css file. These styles are loaded and applied after the base.bundle.css files.

Override section specific styles ​

Some CSS files are only loaded inside the sections that require them. For example, the CSS for Stickers is only loaded in the file block-sticker.liquid. To add new or override existing Sticker styles, add your CSS inside the liquid file directly - between two <style></style> tags. The same process applies to other sections that load specific CSS styles.