> 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FNniso7aYSHVWM0nP1n72%2FP-1.png?alt=media&amp;token=31c7630a-59e2-4368-b743-2754c64a4d42" 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2F3UNVyWM4IoiEhFfEXGho%2FP-2.png?alt=media&amp;token=a2996bcd-1a2d-43ba-a079-4f6f9f90747d" 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FypPbVg3LammIOhX14lrb%2FCustom-image-swatch.png?alt=media&amp;token=31fde917-81b8-4673-8dd6-16630cc16835" 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FIwgPXPl77muERCN02ZkH%2FSwatch-configuration-4.png?alt=media&amp;token=9c0aeabb-00ec-4570-a9ff-ef740c6bde61" 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)