> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.linkedoption.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Conditional Swatch Images in Multi-Option Product Groups

## **Overview**

**Conditional Swatch Images** allow you to change the swatch image of a specific option based on the selected values of other options within the same product group.
This feature ensures that customers always see the correct visual representation for the exact product configuration they have selected — even when multiple options influence the appearance.

### **Example**

Imagine a product group that includes multiple options:

- **Color**
- **Magsafe** (With / Without)
- **Finish** (Matte / Glossy)
- **Material** (Plastic / Metal)

The appearance of a color swatch may vary depending on a combination of these other option values. For instance:

- **Color = Blue + Magsafe = With Magsafe** → Show the “Blue + Magsafe” swatch
- **Color = Blue + Magsafe = Without Magsafe** → Show the “Blue without Magsafe” swatch
- **Color = Blue + With Magsafe + Matte Finish** → Possibly show a third version of the swatch
- **Color = Blue + With Magsafe + Glossy Finish + Metal Material** → Show yet another variation if needed

With **Conditional Swatch Images**, you can define rules based on any combination of option values — not just two — allowing you to support complex product variations with precise visual accuracy.

### How to Use Conditional Swatch Images

Click the **condition icon** next to the swatch image.

![Click condition icon](https://helpkit.getalltool.com/api/media/file/image-126.png)

In the modal that appears, enter the conditions and assign the corresponding swatch image.

![Add a condition block](https://helpkit.getalltool.com/api/media/file/image-127.png)

You may add multiple **condition blocks** to support different conditional swatch scenarios.

![Fill condition info](https://helpkit.getalltool.com/api/media/file/image-128.png)

After completing the configuration, simply click **Save**.

You will then see the number of condition blocks displayed on the page, and the condition icon will appear in an active state.

![Condition activated](https://helpkit.getalltool.com/api/media/file/image-129.png)

### Resulting effect

![Result 1](https://helpkit.getalltool.com/api/media/file/image-130.png)

![Result 2](https://helpkit.getalltool.com/api/media/file/image-131.png)