Skip to content
Signal Theme Docs

Swatches

When a product has a colour option, Signal can show real colour chips instead of text buttons. Two settings make that work.

SettingWhat it controlsDefault
Swatch option namesWhich product option names should render as colours. Comma-separated.color, colour, shade, tint
Custom swatch colorsYour own colour definitions, one per line.Empty

How a colour becomes a chip

Section titled “How a colour becomes a chip”

Two steps, and both have to succeed:

  1. The option name matches. If your product option is called “Colour”, it matches the default list. If you called it “Shell” or “Finish”, add that word to Swatch option names.
  2. The colour name resolves. The theme knows common colour names — black, navy, olive, sand and many more. Anything it does not know, you define yourself.

Defining your own colours

Section titled “Defining your own colours”

In Custom swatch colors, one per line:

Deadstock Olive:#4a5234
Raw Canvas:#d6cdb8
Signal Orange:#d56a40

The name on the left must match your product option value exactly, including spaces and capitalisation.

You can also point at an image, for fabrics and patterns where a flat colour would not read:

Tiger Camo:https://cdn.shopify.com/s/files/1/0000/camo.jpg

Two-tone colours

Section titled “Two-tone colours”

For a colour with two parts, separate hexes with a slash:

Black / Orange:#1a1a1a/#d56a40

The chip splits diagonally.

If it looks wrong

Section titled “If it looks wrong”

Chips show as text buttons. The option name is not in the list. Add it.

One colour is grey and the rest are right. That name is not in the dictionary and has no custom definition. Add a line for it.

My custom colour is ignored. The name must match the option value exactly. “Olive Green” and “olive green” are different; so are “Olive” and “Olive ”.

An image swatch is blank. The URL is relative, or the file is not public. Use the full https:// address.

Section titled “Related”