> For the complete documentation index, see [llms.txt](https://help.gordonbyte.com/themes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.gordonbyte.com/themes/clariss/general/card-swatches.md).

# Card Swatches

<figure><img src="https://4157603424-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuPKVW9ibHGbrYUuBzQXQ%2Fuploads%2FUQAnHhB0iEfJZk9K7LPv%2FScreenshot%202025-09-09%20at%202.54.27%E2%80%AFPM%20(2).png?alt=media&amp;token=8a625169-c51c-4918-b348-d015a1093088" alt=""><figcaption></figcaption></figure>

## How to enable swatch?

To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder)

Within the Theme editor, navigate to the **Products** tab and locate the **Product Cards** section. From here, you can enable the **Show swatch** checkbox option.

{% hint style="warning" %}
The first swatch set in the admin will be the one displayed on the product card.
{% endhint %}