> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/option-types/shared-settings/swatch-style-and-previews.md).

# Swatch style and previews

Display option values as colors or images, set swatch and tooltip sizes, and preview colors and fonts before the customer selects them.

These settings control how option values are displayed, and how much detail a customer can see before selecting one.

**Watch it done — 1:28.** Turning on **Font preview** and **Color preview** in an option set, so customers see the typeface and the shade inside the widget before they choose.

{% embed url="<https://www.youtube.com/watch?v=Mc2O3g5deHc>" %}

There is a second video for the same two settings used with the [Personalizer](/options/product-personalizer/personalizer.md), where the result is drawn onto the product image instead of shown in the widget. It is on [Fonts](/options/product-personalizer/layer-settings/fonts.md).

## Swatch style

Displays option values as text, colors, or images. Available on the **Basic** tab.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2F9N3qZbgcMpArZMCZ8zx5%2Fswatch%20style.png?alt=media&amp;token=26827264-d23c-4475-b5a8-3083ad297510" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">Value</th><th>Description</th></tr></thead><tbody><tr><td><strong>Default</strong></td><td>The values are displayed as text.</td></tr><tr><td><strong>Color</strong></td><td>Each value displays a color chip. Adds a <strong>Color</strong> column to the option values table.</td></tr><tr><td><strong>Image</strong></td><td>Each value displays an image. Adds an <strong>Image</strong> column to the option values table.</td></tr></tbody></table>

The available values depend on the option type. Color swatch and Color dropdown default to **Color**. Image swatch and Image dropdown always use images.

{% hint style="warning" %}
Changing **Swatch style** changes the columns in the option values table. Select the style before you enter your option values.
{% endhint %}

## Swatch image width and height

Sets the display size of each swatch image, in pixels. Both are `60` by default and are set separately, so swatches can be rectangular.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2F56HpqrPiUBrbUghMT4ZI%2Fwidth%20height.png?alt=media&amp;token=02a51cbd-dd40-4575-8449-9d77b5574705" alt=""><figcaption></figcaption></figure>

Larger swatches are easier to see on mobile, but they increase the height of the option. For many large swatches, use a [slider or collapsible layout](/options/option-types/shared-settings/collapsible-layouts-and-sliders.md).

## Tooltip style

Sets what is displayed when a customer hovers over a swatch.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2FciuaWuxk60PMrl33ToCp%2Ftooltip.png?alt=media&amp;token=574bfc66-25fe-44f8-b756-8d4c0191beaf" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="230">Value</th><th>Description</th></tr></thead><tbody><tr><td><strong>Text</strong> (default)</td><td>Displays the option value name.</td></tr><tr><td><strong>Text &#x26; image</strong></td><td>Displays the name and an enlarged image. Adds the <strong>Tooltip image width</strong> and <strong>Tooltip image height</strong> settings, both <code>150</code> px.</td></tr></tbody></table>

{% hint style="warning" %}
Tooltips are displayed on hover, which is not available on touch devices. Add information that mobile customers need to the option value's help text instead.
{% endhint %}

Tooltips are also controlled store-wide by **Show tooltip when hovering over options** under **Settings > Settings > General**.

## Color preview

Off by default. Displays a preview of the color the customer selected or entered.

When enabled, the **Select text box** setting appears. Use it to select a text option in the same option set. The text the customer enters there is previewed in the selected color.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2FrIwKCCzrSuQsevU7WhFh%2Fcolor%20preview.png?alt=media&amp;token=c237aae2-7eb3-4924-8aff-7227bfe547e3" alt=""><figcaption></figcaption></figure>

To draw the customer's text onto the product image, use the [Personalizer](/options/product-personalizer/personalizer.md) instead.

## Font preview

Off by default. Displays each font name in its own font, so customers can see the font before selecting it.

<figure><img src="https://3141646361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkMyxhAk2ZlJa4wZQGfBI%2Fuploads%2FR67rRyS9MUhkOp5xtAjP%2Ffont%20prv.png?alt=media&amp;token=3080adb2-9657-4f6e-8e82-3ee97d621e87" alt=""><figcaption></figcaption></figure>

The browser loads every font in the list, so a long list takes longer to display.