How do I add color swatches to a Shopify product?
Color swatches are visual chips that show the actual color. A huge conversion lift vs a dropdown listing "navy blue," "burgundy," "forest green." Install Print It My Way (Free plan), add a Color swatch field, define hex values or use standard color names, optionally add per-color upcharges for premium colors. Setup: 3-5 minutes.
Step-by-step setup
- Install Print It My Way. Free plan for testing your first product.
- Add color swatch field. Print It My Way > Add field > Color swatch.
- Define colors (hex or color-name). Red #FF0000, Navy #001F3F, etc.
- Set per-color pricing (optional). Standard colors free; premium colors +$3.
- Test on storefront. Swatches display as tap-friendly chips.
Why color swatches convert
A dropdown asks the customer to imagine "navy blue" vs "midnight blue". They can't tell the difference without a swatch. Real color chips show exactly what's coming. Industry-typical conversion lift from dropdowns to swatches: 20-40% on color-critical products.
Setup steps
Step 1: Install Print It My Way.
Step 2: Product > Print It My Way tab > Add field > Color swatch.
Step 3: Name the field ("Thread color"). Add options: label + hex value (Red #DC143C, Navy #001F3F, Forest #2D5016).
Step 4: Set required + default. Optional: per-color upcharge for premium colors.
Step 5: Attach to product. Test on storefront and mobile.
Color swatch types
- Solid color chip: flat color rendered from hex value
- Gradient chip: for iridescent or shimmer colors
- Pattern chip: for camo, tie-dye, print patterns (use image swatch instead)
For textured or patterned choices, image swatches (photo of actual fabric) work better than color chips.
Mobile-friendly sizing
Print It My Way sets color swatches to 44×44px minimum on mobile: meeting Apple / Google tap-target guidelines. Hover labels become tap labels on mobile so customers still see the color name.
Add color swatches in minutes
Print It My Way Free plan covers your first color swatch field.
Install Print It My Way. Free Add image swatches →Frequently asked questions
Can I add color swatches to Shopify without an app?
With native Shopify options (Size / Color / Material), the theme decides swatch display. For custom colors beyond native, use a product options app.
Do color swatches change the product image?
With Print It My Way's live canvas, yes: swatch selection updates the product preview instantly.
Can each color have its own price?
Yes. Per-color upcharges via Cart Transform.
Can I use image swatches instead of color chips?
Yes. Image swatches show real fabric / material photos instead of flat color chips.
What size should swatch images be?
For image swatches: 200×200px minimum, 400×400px for retina. For flat color chips, hex values only (no image).
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.