Image Swatch

Let customers choose options with image thumbnails.

Image Swatch lets shoppers choose product options from visual thumbnails, such as materials, patterns, charms, colors, finishes, or prepared design images.

Overview

Image Swatches display options as clickable thumbnail images. Ideal for showing patterns, materials, designs, or product variants visually.

How to add an Image Swatch option

Drag Image Swatch into the editor to create a visual choice group.

What this shows

Drag Image Swatch into the editor.
Name the option group.
Add visual values for shoppers to choose from.

Live Preview

Image Swatch supports Live Preview. When enabled, selecting an image swatch updates the product image in real time — for example, switching between fabric patterns or product colors. Configure the preview layer position and size in the editor.

Set up Live Preview for Image Swatch

Use Live Customizer when a swatch should change the product preview image.

What this shows

Enable Live Customizer for the Image Swatch.
Upload or select the preview image for each value.
Position the preview layer on the product image.

Turn off Live Preview for one Image Swatch

If a swatch should only collect a choice, turn off the live customizer for that option.

General Settings

Label — The option group title shown to customers (e.g. "Choose Pattern")
Required — Whether a selection is mandatory before adding to cart
Default Option — Pre-selected value when the page loads
Help Text — Tooltip or guide text to help customers make a choice
Allow Multiple — Let customers select more than one swatch

Change the Image Swatch label

Rename the label so shoppers understand what they are choosing.

Set the default Image Swatch option

Choose a default value when one swatch should be preselected.

Option Values

Each value needs a name and an image. You can duplicate or delete values as needed. Additional settings per value:

Image — Upload a thumbnail image for the swatch
Price Add-on — Optional surcharge for this selection
Variant Linking — Link to a Shopify variant for stock tracking

Upload thumbnail images for Image Swatch values

Upload one thumbnail per value so the swatch choice is visual.

What this shows

Open the option value settings.
Upload one image for each value.
Use clear thumbnails that shoppers can distinguish quickly.

Appearance

Layout — Grid or list arrangement
Swatch Size — Small, medium, or large thumbnails
Corner Radius — Square, rounded, or circle
Border & Outline — Border style for selected and unselected states
Label Position — Above or beside the swatches

Change Image Swatch size

Adjust the swatch size to match the amount of visual detail shoppers need.

Adjust Image Swatch padding

Padding controls the breathing room inside each swatch.

Change Image Swatch corner radius

Use radius settings to make swatches square, softly rounded, or circular.

Change Image Swatch style

Use style settings to tune how selected and unselected swatches appear.

Conditional Logic

Use Conditional Logic to show or hide this option based on another selection. For example, show pattern options only when a specific product style is selected.

FAQ

When should I use Image Swatch?

Use Image Swatch when customers should choose from visual options such as materials, patterns, charms, graphics, finishes, or product styles.

Does Image Swatch support Live Preview?

Yes. Image Swatch can update the product preview directly when Live Customizer is enabled for the option.

Can customers select more than one Image Swatch value?

Yes. Enable multiple selection and use minimum and maximum settings to control how many values can be selected.

Dashboard Analytics

Color Swatch