> For the complete documentation index, see [llms.txt](https://help.spicegems.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.spicegems.com/evs-easy-variation-swatches/options-configuration/types-of-swatch-configuration.md).

# 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)