# 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FHS0daY3MGamv4gHvwXgm%2Fimage.png?alt=media&#x26;token=1ec6e59f-192a-459b-9eb1-b9c69de7220c" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FsBvvk5hGEq8FyXpoFk0q%2Fimage.png?alt=media&#x26;token=19a622a3-c440-42a1-8240-5aa5956077a3" 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!