# Swatches

Display your product variants as **Swatches** to make it easy for customers to view your product options at a glance.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FbzhR4pVcG8eDkpZvD3q8%2Fswatches.png?alt=media&#x26;token=70c88bcd-6031-4b91-a213-6c8fc97a42ca" alt=""><figcaption></figcaption></figure>

<details>

<summary><mark style="color:blue;"><strong>Why are my swatches blank?</strong></mark></summary>

If your swatches appear blank, make sure that you are using an existing default color or that your image files and custom swatch names match your variant names. You may also need to add custom swatches for multiple languages.

</details>

## **Enable swatches**

***

Swatches are enabled in your theme settings by adding the option name for your variants.

1. Go to **Theme settings > Swatches**.
2. Enter the exact name of the product options that you want to display as swatches (e.g., 'Color'). Enter multiple option names as a comma-separated list.
3. Click **Save**.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FYVWbf1h7rrpLclYLvjwA%2Fswatches-option-name.png?alt=media&#x26;token=40f02ebb-6ba9-4e89-9819-ff169320a567" alt=""><figcaption></figcaption></figure>

## Set up swatch colors

***

You can add swatches using **default colors** or **custom colors** added to your theme settings. You can also **upload custom images** to represent your product variants more precisely.

[Use default colors for swatches](https://help.fluorescent.co/eclipse/products/swatches/use-default-colors)

[Use custom colors for swatches](https://help.fluorescent.co/eclipse/products/swatches/use-custom-colors)

[Upload custom images for swatches](https://help.fluorescent.co/eclipse/products/swatches/use-custom-images)

## Swatch options

***

Go to **Theme settings > Swatches** to change how swatches appear across your store.

<table data-view="cards"><thead><tr><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Show product listing swatches</strong></td><td><a href="../product-listings/product-card-styles#show-swatches">#show-swatches</a></td></tr><tr><td><strong>Show product filter swatches</strong></td><td><a href="../../collections/collection-page/filters-and-sorting#show-product-filter-swatches">#show-product-filter-swatches</a></td></tr><tr><td><strong>Change product page swatch size</strong></td><td><a href="../../product-pages/variant-options#swatches">#swatches</a></td></tr></tbody></table>