# Types of Swatch Configuration

There are 2 Types of configuration available for both Product and Collection Pages:

* **Variant Image** - Allows to display variant images of the product variants on swatches.
* **Custom Color/Image** - Allows you to configure the custom color or image that you want to display on variant swatches.

{% hint style="info" %}

* Select the [**Variant Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-1.-variant-image) option to display the default Variant image on swatches.
* Select [**Color/Custom Image**](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/pages/GAm9KXZesdoNfQgxUZSj#id-2.-custom-color-or-image) to display custom color/image on swatches.
  {% endhint %}

### 1. Variant Image 

If you have assigned images to variants in the product section, you can choose the **Type** - "Variant Image"  to display the variant image in a swatch style.

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

{% hint style="info" %}
Note: If the image is not assigned to any variant, the app displays the first image of the product image gallery on all variants.&#x20;
{% endhint %}

You can choose to display from the **"First Image"**, **"Second Image"** or **"Last Image"** to display on the variant swatches.

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

### 2. Custom Color or Image&#x20;

* Choose a swatch style - either **Circular** or **Square**. Then, under **Type**, select **Color/Custom Image**.

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

* Click on **Upload Swatch** → Search for the color name, and customize it as needed.&#x20;

You can add the following for your sub-options

* **Custom Color (HEX Code):** Enter a valid HEX color code.
* **Image:** Upload an image from your system (maximum file size: 1 MB).
* **Image URL:** Provide a direct URL to an image.

{% hint style="info" %}
The configuration will be applied based on the priority.

* **Color** *(Lowest priority)* — Applied when the option is enabled and a HEX color code is provided.
* **Image** *(Medium priority)* — Applied when the option is enabled and an image is uploaded.
* **Image URL** *(Highest priority)* — Applied when the option is enabled and a valid image URL is added.

If multiple options are configured, the system will always apply the one with the highest priority.
{% endhint %}

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

* Click **Save** to apply the custom colors to the s**watches.**

**If you need any assistance with the configurations, feel free to reach out to** [**help@spicegems.com** ](mailto:help@spicegems.com)


---

# 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://help.spicegems.com/evs-easy-variation-swatches/options-configuration/types-of-swatch-configuration.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.