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.

There is a second video for the same two settings used with the Personalizer, where the result is drawn onto the product image instead of shown in the widget. It is on Fonts.

Swatch style

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

Value	Description
Default	The values are displayed as text.
Color	Each value displays a color chip. Adds a Color column to the option values table.
Image	Each value displays an image. Adds an Image column to the option values 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.

Changing Swatch style changes the columns in the option values table. Select the style before you enter your option values.

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.

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.

Tooltip style

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

Value	Description
Text (default)	Displays the option value name.
Text & image	Displays the name and an enlarged image. Adds the Tooltip image width and Tooltip image height settings, both 150 px.

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.

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.

To draw the customer's text onto the product image, use the Personalizer instead.

Font preview

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

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