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

# Custom CSS

For advanced styling beyond the built-in options, you can add your own CSS in **Global settings → Custom CSS**. The CSS is loaded on your storefront and applies to the OPTIS Color Swatch elements.

<figure><img src="/files/K6OYYFlqV4YxNsZdiQBI" alt="The Custom CSS editor in Global settings"><figcaption></figcaption></figure>

{% hint style="warning" %}
Custom CSS is an advanced feature. Incorrect rules can affect how swatches look. Test on a draft theme first if you are unsure, and keep a copy of your CSS so you can revert.
{% endhint %}

## How to add custom CSS

{% stepper %}
{% step %}

### Open Global settings

Go to **Global settings** and find the **Custom CSS** section.
{% endstep %}

{% step %}

### Write your CSS

Enter your CSS rules in the editor.
{% endstep %}

{% step %}

### Save

Click **Save**. Refresh your storefront to see the result.
{% endstep %}
{% endstepper %}

## Targeting OPTIS elements

The app renders its variant picker inside a custom element. You can target it in your CSS, for example:

```css
/* The OPTIS variant picker wrapper */
optis-variant-picker {
  margin-top: 12px;
}
```

{% hint style="info" %}
Most appearance changes (size, spacing, colors, borders, alignment) can be made without code on the [Styling](/swatch/styling/styling-overview.md) page. Use Custom CSS only for adjustments the Styling page does not cover.
{% endhint %}

If you are not sure how to target a specific element, reach out via live chat and our support team can help.