> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-settings/custom-css.md).

# Custom CSS

Custom CSS lets you add your own style rules to override the theme. It is a native Shopify field, not a Helix setting: it appears in the theme editor on **Theme settings** and on individual sections and blocks. Theme-level CSS applies storewide; section- or block-level CSS is scoped to that element.

{% hint style="info" %}
This is intended for advanced users. Custom overrides are not part of Helix's supported styling and can conflict with theme updates.
{% endhint %}

***

## How to Add Custom CSS

{% hint style="success" %}
**Step 1** — In the theme editor, open **Theme settings** (for storewide rules) or select a section or block (for scoped rules), then find the **Custom CSS** field.

**Step 2** — Enter your rules. No `<style>` tag is needed:

```css
.banner__heading {
  font-size: 3.5rem;
}
```

**Step 3** — Save.
{% endhint %}

Alternatively, add a **Custom Liquid** section or block and place your rules inside a `<style>` tag. Use this when you also need Liquid or HTML alongside the CSS:

```liquid
<style>
  .banner__heading {
    font-size: 3.5rem;
  }
</style>
```

***

## Common Use Cases

**Adjust a specific heading size without changing the global typography:**

```css
.banner__heading {
  font-size: 3.5rem;
}
```

**Hide an element:**

```css
.product-information__vendor {
  display: none;
}
```

**Style rich text links:**

```css
.rte a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
```

***

## Guidelines

{% hint style="info" %}
Use specific class selectors so a rule only affects the elements you intend. The CSS is not validated, so preview in the theme editor before saving.
{% endhint %}

{% hint style="warning" %}
Avoid `!important`. Prefer a more specific selector instead — it keeps overrides easier to maintain across theme updates.
{% endhint %}