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

# Card Swatches

Let shoppers preview a product's swatch options (such as colors or styles) right on the product card.

<div align="center"><figure><img src="https://1383247179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoBnmAfzVuzk6Caqz86ki%2Fuploads%2FJl2ROs3eoWtJ1MoFLJws%2Fprod_card.jpg?alt=media&amp;token=6c34d98c-b2e8-474c-a8b1-31be28ef9116" alt="" width="323"><figcaption></figcaption></figure></div>

## How to enable swatches?

First, open **Page Builder** [*(how to launch Page Builder?)*](/themes/manifest/manifest-theme.md#page-builder)

In Page Builder, go to the **Products** tab and find the **Product Cards** section. Select the **Show swatch** checkbox.

To turn swatches off, leave the checkbox unchecked.

{% hint style="warning" %}
The product card shows the first swatch option set up for the product in your admin.
{% endhint %}

## How to resize and style swatches?

First, open **Page Builder** [*(how to launch Page Builder?)*](/themes/manifest/manifest-theme.md#page-builder)

In Page Builder, go to the **Products** tab and find the **Product Cards** section. Choose a size from the **Swatch Size** dropdown (**Small**, **Medium**, **Large** or **XLarge**). Pick the size that best shows off your product options.

Swatches come in two styles: **Normal** and **Flyout**.

**Normal** - Shows the swatch options one by one in the center of the product card.

**Flyout** - Places the swatch options on the right side of the product card and reveals them with a flyout animation on hover.