Native swatch (Dawn theme)
- Products → Metafields → set up Color metafield type
- On each variant → Metafields → set color
- Dawn renders swatch chip automatically
Image swatches
Instead of solid color chip, show product photo in that color as a small thumbnail. Better for pattern/print products. Setup: variant image + swatch shows the image.
Per-color product image
Upload separate images per color (Red shirt, Blue shirt). Assign to each variant. Product image swaps when customer selects.
Custom color (any hex)
For truly custom colors, use a color picker input (personalizer app). Line-item property, not variant.
Frequently asked questions
How to add color swatches to Shopify?
Dawn theme: add Color metafield to variants, chip renders automatically. Other themes: theme code edit or app.
Best size for color swatch chips?
32×32 px minimum on desktop; 44×44 px on mobile (tap target).
How to show product photo per color?
Upload separate photos to product media, assign each to its variant. Product page swaps on selection.
How to add gradient or pattern swatches?
Use image swatch — small thumbnail of the pattern/gradient. Not solid color chip.
How to handle sold-out color?
Disable + strikethrough. Show 'Notify me' or 'View in stock colors' option.
Can customers pick custom color (any hex)?
Yes via color picker input (personalizer app like Print It My Way). Line-item property, not variant.
How many colors before dropdown better than swatches?
20+ colors — swatches become cramped. Consider filterable dropdown with search.
Do color swatches affect page speed?
Minimal impact. Native chips = zero. Image swatches load per-color image (lazy load with intersection observer).
Related reading
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way