> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/faq/products-and-variants/my-color-swatches-show-up-as-pills.md).

# My color swatches show up as pills

Why a variant option renders as pills instead of colour swatches in Volume, and the two conditions it has to meet.

Volume decides which options become swatches from the **option name**, and it applies two checks. An option has to pass both. Miss either one and the option quietly falls back to pills — no error, no warning.

### Check 1 — the option is listed under Color swatches

Go to **Customize → Theme settings → Variant picker** and find the **Color swatches** heading. The **Option label** field under it is a comma-separated list of option names: `Color, Colour, Main color`.

The match is on the **whole name** and it ignores case — `Color` matches `color`, but it does not match `Color family`. Add every spelling your products actually use.

Each display type has its own **Option label** field under its own heading — **Pills**, **Color swatches**, **Thumbnail swatches** — so make sure you are typing into the right one. An option listed under both **Color swatches** and **Thumbnail swatches** renders as a thumbnail.

### Check 2 — the option name contains the word "color"

This is the one that catches people out. Beyond the list above, the option name itself must **contain** the theme's colour keyword, which is `Color` out of the box. `Colour` is accepted as well.

So an option called **Shade**, **Finish** or **Farbe** stays as pills even after you add it to the list. Two ways out:

* rename the option so the word is in it — **Shade color**, **Color finish**;
* or change the keyword itself. It is a theme text string, not a setting: **Online Store → Themes → … → Edit default theme content**, under **Products**, change `Color` to the word you use. This is also how a non-English store makes `Farbe` or `Couleur` work.

{% hint style="warning" %}
This extra check applies to **colour** swatches only. Thumbnail swatches have no such rule: any option listed under **Thumbnail swatches** renders as thumbnails whatever it is called. If you need image swatches on an option that cannot be renamed, use thumbnails.
{% endhint %}

### If the swatches appear but show the wrong colour

Volume looks for a colour in this order:

1. a PNG uploaded to **Content → Files**, named after the option value (`ocean_blue.png` for “Ocean blue”);
2. a rule in **Theme settings → Variant picker → Custom colors for swatches → Configuration**, written as `Name:#HEX` with one rule per line;
3. Shopify's own swatch value for that option, set under **Settings → Custom data**;
4. failing all of those, the last word of the value read as a CSS colour name — which is why “Ocean blue” ends up plain blue and “Midnight” ends up as nothing.

{% hint style="success" icon="lightbulb" %}
See [Color Swatches](/docs/volume-themes/products/color-swatches.md) for the full setup and [Variant Picker](/docs/volume-themes/theme-settings/variant-picker.md) for the other display modes.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/faq/products-and-variants/my-color-swatches-show-up-as-pills.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.