Image Swatch
Let customers choose options with image thumbnails.
Last updated: 2026-09-13
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
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
What this shows
- Enable Live Preview for the Image Swatch.
- Upload or select the preview image for each value.
- Position the preview layer on the product image.
To present the preview inside a specific shape, choose a built-in mask or upload a custom PNG mask. See Image Masks.
Turn off Live Preview for one Image Swatch
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
Set the default Image Swatch option
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 PNG, JPG, JPEG, WebP, or SVG thumbnail image for the swatch, up to 2 MB
- 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
What this shows
- Open the option value settings.
- Upload one PNG, JPG, JPEG, WebP, or SVG image for each value, up to 2 MB per image.
- 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 Image Swatch padding
Change Image Swatch corner radius
Change Image Swatch style
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.
See Image & Asset Requirements for the 2 MB thumbnail and preview limits, recommended formats, dimensions, and performance guidance.
Build a Charm or Component Customizer
Image Swatch can power a charm, patch, bead, sticker, or component builder. Enable multiple selection, set the minimum and maximum choices, and use sequential Live Preview positioning to place the selected images in order. Each value can also have its own price adjustment and linked Shopify variant inventory.
See Charm Builder for the complete preview, pricing, inventory, asset, and testing workflow.
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 Preview 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.
What is the image size limit for Image Swatch images?
Image Swatch thumbnail and preview images can be up to 2 MB each.
Can Image Swatch values use SVG images?
Yes. Merchant-uploaded Image Swatch value images can use SVG when a scalable vector asset is the best fit. PNG, JPG, JPEG, and WebP remain useful for raster thumbnails and preview images.