# Color Swatch and Image Swatch

**Color Swatch** and **Image Swatch** are visually interactive option types that let customers select from a set of choices using **colors** or **images**, instead of traditional dropdowns or text.

***

**🧩 How They Work:**

* Each value appears as a clickable color block or image.
* Customers can easily tap or click to choose their desired option.
* You can allow **single** or **multiple selections** depending on your configuration.

***

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

#### ⚙️ General Settings:

For both elements, you can configure the following:

* **Label / Name**
* **Required Field** (force selection before proceeding)
* **Hidden Field**
* **Helptext**
* **Add-on Price** for specific selections
* **Allow Multiple Selection**
* **Default Value**
* **Conditional Logic**
* **Mix/Max selection**
* **Style: Veritial/Horizontal**
* **Out-of-Stock Style**: You can customize how out-of-stock options appear — *show, blur, strike through,* or *hide*.
* **Expand/collapse option values**

***

#### 🎨 Specific Features for Color Swatch:

* **Color Picker Integration**: You can define swatch colors using HEX codes.
* **Preview Functionality**: When linked with elements like Text Box, the selected color can be shown as a real-time preview.

***

#### 🖼️ Specific Features for Image Swatch:

* **Upload custom images to represent each option.**
* **Tooltip Style:**

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

***

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email **<contact@globosoftware.net>**.

We’re always here and happy to help — with sincerity and care!


---

# Agent Instructions: 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:

```
GET https://docs.globo.io/options/selection-option-type/color-swatch-and-image-swatch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.