> 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

Let’s understand the pre-defined swatch style configuration step-by-step for the Product page and Collection 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FhQLcUa2tSM1nqMqamUs0%2FEnable-on-collections.png?alt=media&amp;token=e6d63098-6875-4cf6-a139-eb96f247007e" 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FyCvnNKVcHJDWoXtvnAAy%2FShopify-option.png?alt=media&amp;token=8d5c4d5b-70ce-4344-8454-1e33f41c1a88" 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="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FrnDw0Lvf11isCGGmUq3i%2F5.png?alt=media&amp;token=961c9588-3a66-471d-a384-2747b032c8c8" alt=""><figcaption></figcaption></figure>

## 3. Preview option

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

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FM7nwU4sqoC7kLbFplLxr%2F4.png?alt=media&amp;token=1cac4440-f848-4ce4-ae66-297b45eb6b76" alt=""><figcaption></figcaption></figure>

## 4. Visibility

* Product Page

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FVrPFXiusR8ZvyPRPXm6d%2FPP-1.png?alt=media&amp;token=47e1ee22-a13a-4fe1-be63-da187ee43861" alt=""><figcaption></figcaption></figure>

* Collection Page

<figure><img src="https://696655714-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ25KbJvXBPUEkv6S8Myq%2Fuploads%2FlVXG5htXM814qwUEsfMO%2FCP-1.png?alt=media&amp;token=d5fcdfc2-89b0-4176-b35a-bc9a5fb1541e" 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 %}