> 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/selection-types/image-swatch.md). # Image swatch A grid of pictures with adjustable size, zooming tooltips, and slider layouts, for patterns, materials, and designs. A grid of pictures, one for each value. Use it when the picture is the decision: fabrics, patterns, print designs, materials, and finishes. It has more presentation settings than any other selection type, because a grid of images takes the most space on a product page. **Watch it done — 1:50.** Replacing text values with image swatches, plus the **Text & image** tooltip that enlarges a pattern when a customer hovers over it. {% embed url="" %} ## What customers see A grid of picture swatches at the size you set. Hovering displays the value's name, and optionally a zoomed version of the image. Long lists can be displayed as a slider.

A grid of image swatches on a storefront product page with a zoomed tooltip on the hovered swatch — A grid of picture swatches at the size you set.

## Basic

Setting	What it does
Label / Name	Customer-facing text, and the name on the order.
Required field	Blocks add to cart until one is chosen.
Hidden label	Hides the label.
Option values	The choices, each with an Image column. Upload a picture or reuse one of the product's own images. See Working with option values.
Allow multiple	Lets the customer choose several.
Min selections / Max selections	Shown once Allow multiple is on.
Help text	Guidance for the whole option.
Default value	Preselects a value.
Conditional logic	Show or hide based on other choices.

This type has no **Swatch style** setting, because it always displays images. ## Advanced

Setting	What it does
Add-on quantity / Quantity	How add-ons scale — including Mixed quantity when multiple is on.
Enable custom layout	Unlocks the layouts below.
Layout type	Expand, Collapse, or Slider.
Scroll type, Scroll height, Number of option values	Scroll area for the Expand and Collapse layouts.
Number of rows, Swatches per row, Show navigation arrows, Show indicators, Slider style	Slider layout settings.
Swatch image width / Swatch image height	Swatch size in pixels. Both start at `60`.
Tooltip style	Text, or Text & image for a zoomed preview on hover.
Tooltip image width / Tooltip image height	The zoomed image size. Both start at `150`. Shown once the tooltip style includes an image.
Not allow deselect	Stops the customer clearing their choice. Single-select only.
Direction style	Vertical or Horizontal.
Out of stock options	How sold-out values look.
Help text position	Where the option-level help text sits.
HTML class / Column width	Styling hook and field width.

### Swatch size and tooltip style These are the two most important settings on this type, and they solve opposite problems:

Problem	Answer
Detail is not visible in a small swatch	Tooltip style Text & image with a large tooltip image — keep swatches small, let the tooltip do the zooming
The grid dominates the page	Smaller swatches, or the Slider layout
Customers cannot tell two patterns apart	Larger swatches, plus the zooming tooltip
Non-square products look wrong	Rectangular swatches — width and height are independent

Touch devices do not have a hover state, so put anything essential in the value's own help text rather than in a tooltip. ## Personalizer Supported as an **image layer**. The selected value's image is drawn onto the product photo. The settings are image shape, background mode, size, position, rotation, crop area, and customer controls. This gives the customer a grid of designs and shows the selected design on the product immediately. See [Image layers](/options/product-personalizer/layer-settings/image-layers.md). ## Add-on pricing Prices are set on each value, so premium fabrics can cost more than standard ones. Linking values to add-on products gives each design its own inventory. See [Add-on pricing](/options/add-on-pricing/add-on-pricing.md). ## Preparing your images The presentation settings cannot correct inconsistent source images. Before uploading: * Crop every image to the same proportions. Mismatched crops can make a grid look untidy, regardless of how you size it. * Photograph or scan images from the same distance and under similar lighting so colors are consistent. * Upload images at a size larger than your tooltip dimensions. Otherwise, the zoomed version may appear blurry. * Keep file sizes reasonable. A grid with 40 large images can slow down the product page. ## Examples **Twenty fabric swatches with zoom**

Setting	Value
Label / Name	`Fabric`
Swatch image width / height	`60` / `60`
Tooltip style	Text & image
Tooltip image width / height	`240` / `240`
Layout type	Slider, 2 rows, 5.5 per row, arrows shown
Required field	On

**Six print designs, large** Swatches at `120` × `120`, no slider, and **Personalizer** on so the selected design is displayed on the product photo. **Fabric strips** Swatches at `140` wide and `40` high, matching the shape of the material. **Designs with different prices** Standard designs are free, and licensed artwork is priced through **Existing product** so it maps to a real SKU. ## Notes * Available on all plans. The slider layout may not be available on all plans. * Works in Shopify POS. * Every value needs an image. Without one, the swatch is blank. * The swatch sizes control how the image is displayed. They do not resize the uploaded file. * Value names are displayed only on hover, so put any essential information in the per-value help text.