> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/color-swatches.md).

# Color swatches

Color swatches show the colors a product comes in as small dots or squares, so customers can see the range without opening the product. That makes a listing easier to scan and cuts down on visits to products that do not come in the color someone wants. In these settings you decide the shape of the swatch, whether it shows a variant photo or a flat color, which variant option counts as a color, and what color to use when the option name is not a real color word.

### Where to find these settings <a href="#where-to-find-these-settings" id="where-to-find-these-settings"></a>

Go to **Online Store > Themes > Customize > Theme settings > Color swatches**.

<figure><img src="/files/dz7nG3PqJfug7KsksyUD" alt=""><figcaption></figcaption></figure>

### Settings <a href="#settings" id="settings"></a>

| Setting                    | Description                                                                                       |
| -------------------------- | ------------------------------------------------------------------------------------------------- |
| **Hide sold out variants** | Hides swatches for color variants that are out of stock, so customers only see what they can buy. |
| **Color shape**            | The shape of the swatch. Choose either **round** or **square**.                                   |

### Swatch type <a href="#swatch-type" id="swatch-type"></a>

Choose how to display product variants (only works on the homepage):

* **Variant image**: displays the image assigned to each variant as the swatch.
* **Color**: displays a solid color swatch or a custom image based on the selected color option and any custom colors you define.

{% tabs %}
{% tab title="Variant image" %}

<figure><img src="/files/a1rOkxqnQWw1vXxXJ0Oh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Color" %}

<figure><img src="/files/iY5P0KnD03lCJdXy76r7" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Color swatch trigger <a href="#color-swatch-trigger" id="color-swatch-trigger"></a>

Enter the exact option name(s) for the variant type you want to display as color swatches (e.g., “Color,Colour,Cor").

If you have multiple option names, separate each with a comma. The names must match your product variant option names exactly. If left blank, the default option name “Color” will be used.

This matters if your catalogue was built by different people or in different languages, because a product whose option is called `Colour` is ignored when the theme is only looking for `Color`.

**When the color swatch trigger has been set:**

<figure><img src="/files/ABJk0I0DFhdS5N6GTWoI" alt=""><figcaption></figcaption></figure>

### Custom colors <a href="#custom-colors" id="custom-colors"></a>

Define a custom value for your color variants by listing them with either a hex color code or an image name. Use the format:

* Hex color code → Caramel: #d8b39b

Separate multiple entries with commas, and make sure each color name matches your product variant name exactly. Ensure any referenced images are uploaded to your store’s files beforehand.

<figure><img src="/files/Yf6uLFZ07ynmOxYVejG1" alt=""><figcaption></figcaption></figure>

For any color name that is not declared in this list, the storefront falls back to Shopify's built-in color for that name, or shows the matching variant image instead when one is set on the product data.

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

Customers see a row of small dots or squares under a product, one for each color it comes in, and that alone tells them whether the product is worth opening. **Variant image** swatches show the real photo of each variant, which is the honest choice for prints, patterns and textures where a flat color would be misleading. **Color** swatches are cleaner and more uniform, and they depend on your custom colors list being complete, since that is what turns a name such as `Caramel` into an actual color on screen. With **Hide sold out variants** on, customers never click through to a color they cannot buy.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Product cards](/velare/customize-your-pages/product-cards.md): where swatches are switched on for cards and where the maximum number is capped
* [Badges](/velare/customize-your-pages/badges.md): the sold out badge, which works alongside hidden sold out swatches
* [Colors](/velare/set-up-your-store/colors.md): store wide color schemes, set separately from swatch colors
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/color-swatches.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.