Swatch types
Every swatch in a product group has a type that decides how it looks: a flat color, an uploaded pattern, the product’s own photo, or a plain text button. You set the type per product as you build a group.
The six types
Section titled “The six types”| Type | What it shows | Best for |
|---|---|---|
| One Color | A single solid color | Standard color options |
| Two Colors | A swatch split between two colors | Two-tone or multi-color products |
| Custom image | An image you upload (PNG, JPG, or SVG) | Patterns, fabrics, textures, gradients a flat color can’t capture |
| Product image | The product’s main image | Showing the real product photo as the swatch |
| Image with text | The product image with a text label beside it | When shoppers need the photo and the name together |
| Pill / Button | A text-only button, no image | Non-visual options like size, style, or flavor |
What each type looks like
Section titled “What each type looks like”One Color and Two Colors
Section titled “One Color and Two Colors”Pick the type in the product row and set the color(s) with the picker:
On the storefront, they render as solid and split circles:
Custom image
Section titled “Custom image”Upload a pattern, texture, or any image the color picker can’t capture. In the app the type is labeled Image / Pattern:
Product image
Section titled “Product image”Uses each product’s featured image automatically - nothing to upload, and the swatch updates when the product’s image changes in Shopify:
If a different photo works better as a swatch - a close-up, or a shot on a plain background - go to Settings > Product groups and set Product image position to that image’s position in the product’s media gallery. Every product then uses the image at that position; products with fewer images keep their featured image. The setting also applies to Image with text swatches, and existing swatches update on their own after you save.
Image with text
Section titled “Image with text”The product photo with the swatch name beside it, rendered as a wide pill:
Pill / Button
Section titled “Pill / Button”Text only - the swatch name inside a button. Best for non-visual options:
Setting the type
Section titled “Setting the type”You pick a type for each product when you add it to a group. The same group can mix types, though most groups stick to one for a consistent row of swatches.
Automations can set the type for you, either from a product metafield or by auto-detecting a color, so you don’t choose it by hand for every product.
Types in CSV and the API
Section titled “Types in CSV and the API”When you build groups through CSV import or the REST API, each type has a swatch_type value, and some need extra fields:
swatch_type | Required fields |
|---|---|
one_color | color_one |
two_colors | color_one and color_two |
custom_image | image_url |
product_image | none |
image_with_text | a swatch name |
pill | a swatch name |