> 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/configure-on-product-and-collections-page.md).

# Configure on Product & Collections Page

* On the product page, by default, the Button swatch is enabled.
* On the collections page, you need to activate the toggle to enable the swatch functionality.

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

## 1. Swatch Configurations - Product & Collections

* Product - Click on default and choose a swatch style (Circular, Square, etc.)
* Collections - Click on default and choose a swatch style (Circular, Square, etc.)

<figure><img src="/files/65KQfcZ8ZU4C9kUdsFoS" alt=""><figcaption></figcaption></figure>

## [2. Select Swatch Type](/evs-easy-variation-swatches/options-configuration/types-of-swatch-configuration.md)

Select the Type - Variant Image or Custom Color, or Image (available for both Product and Collection options)

{% 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 [**Custom Color/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 %}

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

## 3. Preview option

You can open the product directly from the app to check the implemented configurations.

<figure><img src="/files/0pppjk8ugLJuETGytmzT" alt=""><figcaption></figcaption></figure>

## 4. Visibility

* Product Page

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

* Collection Page

<figure><img src="/files/6bHuwOzj7aZJD1ctxkYo" alt=""><figcaption></figcaption></figure>

To customize the Product or Collection swatches, go to [Swatch Styles](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure.md) and customize the styles according to your requirements.

{% content-ref url="/pages/VbUQ2EuVQB846uVKRHT9" %}
[Swatch styles](/evs-easy-variation-swatches/add-new-swatch-styles-and-configure.md)
{% endcontent-ref %}