> 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/general/card-swatches.md).

# Card Swatches

Allow customers to preview Product Swatch Options directly from the product cards, making it simple to display various colors or styles for a single product.

<div align="center"><figure><img src="/files/OFMR28mPSmOdOhs8D9WX" alt="" width="323"><figcaption></figcaption></figure></div>

## How to enable swatch?

To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/manifest-theme.md#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 %}

## How to Resize & Style?

To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/manifest-theme.md#page-builder)

Within the Theme editor, navigate to the **Products** tab and locate the **Product Cards** section. From here, you can select the different sizes from the **Swatch Size** dropdown (**Small, Medium, Large & XLarge**). Select whichever better showcases the product options.

There are two distinct styles available for Swatches: **Normal** and **Flyout**.

**Normal** - Presents the swatch options individually at the center of the product card.

**Flyout** - Arranges product options to the right of the product card, and upon hovering, unveils the product options with a flyout animation.