> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Custom CSS

1. [OPTIS Color Swatch](/swatch)
2. [Global Settings](/swatch/global-settings)

# 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.

![The Custom CSS editor in Global settings](https://storage.crisp.chat/users/helpdesk/website/-/5/9/a/d/59adab2a47ff9400/96a6227f-d0d7-439f-a5f1-0191f9_1y5t0ua.png)

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.

## How to add custom CSS

1. Open Global settings

Go to **Global settings** and find the **Custom CSS** section.

2. Write your CSS

Enter your CSS rules in the editor.

3. Save

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

## Targeting OPTIS elements

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

Most appearance changes (size, spacing, colors, borders, alignment) can be made without code on the [Styling](/swatch/styling/styling-overview) page. Use Custom CSS only for adjustments the Styling page does not cover.

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