Two-color swatch split
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 editor (also available as the source for Swatch card and Pill swatch).
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
- Assign a 1st and 2nd color to your two-color values
In the Custom swatch editor, set both colors on each value that needs them. The in-app preview updates to match the direction below.
- Go to Global settings → pick a Split direction
- Click Save to apply your changes
Related
- 🎨 Custom swatch — assign the two colors per value
- 🪄 Auto-assign swatch — can fill two-color values from the value name
- Global settings overview
Updated on: 25/09/2026
Thank you!