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

# Custom CSS

Add your own CSS for anything the Appearance settings can't reach.

The **Appearance** settings cover shape, size, spacing, colours and states. For anything beyond that — an unusual breakpoint, a nudge against a stubborn theme rule, a tweak to how the swatches sit next to your add-to-cart button — there's a CSS editor.

## Turn it on

1. Go to **Settings → General**.
2. Turn on **Enable Custom CSS**.
3. Write your rules in the editor that appears.
4. Click **Save**.

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fgit-blob-5c3bafedf13d4cb763696b937544750a17894168%2Fsettings-custom-css.png?alt=media" alt="Enable Custom CSS turned on, revealing the CSS editor"><figcaption><p>Turning Enable Custom CSS on reveals a code editor below it.</p></figcaption></figure>

*Insert your own CSS to modify the widget's layout, colors, typography, or spacing.*

## Practical advice

* **Try Appearance first.** A rule you write by hand won't follow along when you switch styles, and it can fight the style's own settings.
* **Scope your selectors** to the app's containers so you don't affect the rest of the page.
* **Change one thing at a time** and check the storefront after each save — including on a phone.
* **Keep a copy** of what you write somewhere outside the app.
* **Avoid `!important`** unless you've confirmed nothing else works; it makes the next change harder.

## Where else CSS can live

The **Globo Color Swatch** app embed in the Theme Editor also has **Custom css** and **Custom js** fields. Prefer the app's editor: settings there stay with the app when you switch or duplicate themes, while anything in the app embed belongs to that one theme.

{% hint style="info" %}
If you'd rather not write CSS, [contact support](/swatch/help/contact-support.md) — our engineers adjust swatch styling to match a theme at no cost.
{% endhint %}

## Related pages

* [General](/swatch/settings/general.md)
* [Customize a swatch style](/swatch/appearance/customize-a-swatch-style.md)