> 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="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-2b4f870df22648ede16895d686ac25eb0a5c7a74%2Fcustom-css.png?alt=media" 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**, select **Advanced**, and you will find the **Custom CSS** section there.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FtmsF574fJCFCOU7GiEkm%2FScreenshot%20(32).png?alt=media&amp;token=fd2f5740-d906-40f6-9861-efffb947dd59" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Write your CSS

Enter your CSS rules in the editor.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FhM23mRAWbayQtlVp7WTj%2FScreenshot%20(34).png?alt=media&amp;token=9cceeef7-5e45-4718-86f4-510e2a3bb413" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Save

Click **Save**. Refresh your storefront to see the result.

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2FJeqXcVhXrAyMxW39yidk%2FScreenshot%20(36).png?alt=media&amp;token=335ba089-4dfc-4b15-8431-1fffbcbf58ed" alt=""><figcaption></figcaption></figure>
{% 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.