Add color swatches to a product
3 min read · Last updated May 27, 2026
Setup
- Personalizer template → Add field → Color swatch.
- Name the field (e.g., "Thread color", "Frame color").
- Add options with label + hex value (Red
#DC143C, Navy#001F3F, Forest#2D5016). - Optional: per-color upcharge for premium colors.
- Set required + default. Save.
Mobile-friendly sizing
PIMW Product Personalizer renders swatches at 44×44 px minimum — meeting Apple / Google tap-target guidelines. Hover labels become tap labels on mobile so customers still see the color name.
Color swatches vs image swatches
Use color swatches for flat colors. Use image swatches (photo of actual fabric/material) for textured or patterned options. Both work on Basic tier ($7.99/mo) and above.
Frequently asked questions
How do I setup?
Personalizer template → Add field → Color swatch . Name the field (e.g., "Thread color", "Frame color"). Add options with label + hex value (Red #DC143C , Navy #001F3F , Forest #2D5016 ). Optional: per-color upcharge for premium colors.
What is mobile-friendly sizing?
PIMW Product Personalizer renders swatches at 44×44 px minimum — meeting Apple / Google tap-target guidelines.
What is color swatches vs image swatches?
Use color swatches for flat colors. Use image swatches (photo of actual fabric/material) for textured or patterned options.