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

# Two-color swatch split

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

# Two-color swatch split

### Function

Some variant values represent **two colors** (for example, a _Black / White_ option). This **Global setting** controls how those swatches are **visually split** between the two colors — and it applies **store-wide**, to every product that has two-color values.

### Where the two colors come from

The split only affects values that actually have **two colors assigned**. You set the first and second color per value in the [Custom swatch](/swatch/variant-display/custom-swatch) editor (also available as the source for [Swatch card](/swatch/variant-display/swatch-card) and [Pill swatch](/swatch/variant-display/pill-swatch)).

|| Assigning a **2nd color** is a premium feature. If a value has only one color, it renders as a solid swatch and this setting has no visible effect on it.

### Split directions

| Split direction | Look |
| --- | --- |
| **Diagonal down** (default) | Split along `\` |
| **Diagonal up** | Split along `/` |
| **Horizontal** | Top color / bottom color |
| **Vertical** | Left color / right color |

The **first color** always fills the first half and the **second color** the other half, following the direction you pick.

### Use when

* You sell items described by **two colors** (e.g. _Black / White_, _Navy / Red_) and want the swatch to show both.
* You want a **consistent split style** across the whole store rather than per product.

---
## How to use

1. Assign a 1st and 2nd color to your two-color values

In the [Custom swatch](/swatch/variant-display/custom-swatch) editor, set both colors on each value that needs them. The in-app preview updates to match the direction below.

2. Go to Global settings → pick a Split direction

3. Click Save to apply your changes

### Related

* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) — assign the two colors per value
* [🪄 Auto-assign swatch](/swatch/variant-display/auto-assign-color-swatch) — can fill two-color values from the value name
* [Global settings overview](/swatch/global-settings/global-settings-overview)