> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Editor - Custom CSS

> Add custom CSS to your storefront for styling that goes beyond what the visual settings expose.

<Frame caption="Theme Editor > Custom CSS">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-custom-css.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=46f2ae6187208e3dbe7ea08733e3d346" alt="Custom CSS settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-custom-css.webp" />
</Frame>

The Custom CSS panel provides a code editor for adding arbitrary CSS rules to your storefront. Use it for anything that the visual theme settings do not cover — custom hover effects, hiding specific elements, or fine-tuning responsive behaviour.

## How it works

1. Click the **unlock** icon to enable editing.
2. Write your CSS in the editor.
3. Click **Apply changes**. The preview updates immediately.
4. Click **Save** in the editor top bar to push the changes to the live storefront.

The CSS is injected after all theme styles, so your rules take precedence. The editor starts locked to prevent accidental edits — unlock it each time you need to make changes.

<Warning>
  Custom CSS is sanitised on the server before it is saved. `@import` and `@charset` rules are removed, and every `url(...)` expression is replaced with `none`. This means background images, webfonts loaded via `@font-face`, and `content: url(...)` rules silently break. To use image or font assets, use the theme settings (for example [Typography](/docs/sales-channels/online-store/theme-editor/settings/typography)) or load them via [custom scripts](/docs/sales-channels/online-store/custom-scripts) instead.
</Warning>

## Using theme variables

Every theme setting is available as a CSS variable. Reference them in your custom CSS to stay consistent with the rest of the theme — if you later change a colour in the Colors panel, your custom CSS picks up the change automatically.

<CodeGroup>
  ```css Example: custom banner using theme variables theme={null}
  .custom-banner {
    background-color: var(--storefront-color-background-contrast);
    color: var(--storefront-color-text-contrast);
    padding: 16px var(--storefront-layout-margin);
    border-radius: var(--storefront-button-border-radius);
  }
  ```
</CodeGroup>

View the full list of CSS variables in the [Theme style](/docs/sales-channels/online-store/theme-editor/settings/theme-style) panel.

<Warning>
  Custom CSS is applied globally to every page of your storefront, and saved changes go live immediately. Test across multiple pages and viewports before you save.
</Warning>

## Related

<CardGroup cols={2}>
  <Card title="Theme style" icon="settings" href="/docs/sales-channels/online-store/theme-editor/settings/theme-style">
    View and copy all available CSS variables.
  </Card>

  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>
</CardGroup>