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.

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 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.

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.

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.