Native Dawn swatch (Shopify 2.0)
- Products → Metafields → Add 'Color' variant metafield
- Type: single-line text (hex code)
- Set each variant's color (e.g. #FF0000 for Red)
- Dawn renders swatch chip automatically
Image swatch alternative
Show product photo in that color as small thumbnail. Better for patterns/gradients. Set via variant image metafield.
Custom hex picker
For truly custom colors (any hex), use color picker input field. Line-item property, not variant.
Styling
Dawn defaults are 32×32 px chips. Increase to 44×44 px for mobile tap targets. CSS in theme.liquid.
Frequently asked questions
How to add color swatches on Shopify?
Dawn: Color metafield on variants + hex code. Non-Dawn: theme code or app.
Native Dawn vs app swatches — which?
Native for simple color chips. App for image swatches, custom hex picker, advanced UX.
How large should color swatches be?
44×44 px minimum for mobile tap. 32×32 px acceptable on desktop-only.
How to show patterns as swatches?
Image swatches — small thumbnail of pattern (checkered, striped). Not solid color chip.
Can customers pick custom color (any hex)?
Yes via app-based color picker field. Line-item property, not variant.
How to show sold-out color swatches?
Strikethrough + disabled. Customer knows the color exists but is unavailable.
Best size for swatch image?
60×60 to 100×100 px. Large enough to see pattern, small enough to fit many in row.
How to bulk set variant colors?
CSV import with Color metafield column. Or Shopify Admin API for automation.
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