Color Swatches
Color Swatches replace standard dropdown variant selectors with visual color circles, making it easier for customers to browse product options.
Features
Section titled “Features”- Visual color circles on product cards and product pages
- Automatic color detection from variant option names
- Custom swatch images for patterns and textures
- Hover preview (shows product image for that color)
- Active state indicator (gold border)
- Accessible with keyboard navigation and screen reader labels
Configuration
Section titled “Configuration”Color swatches activate automatically when products have a “Color” option. The theme matches option values to CSS colors or custom swatch images.
Custom Swatches
Section titled “Custom Swatches”For patterns, textures, or custom colors, upload small square images (50x50px) named after the color option value (e.g., navy-stripe.png).
Best Practices
Section titled “Best Practices”- Use consistent color naming across products
- Provide swatch images for patterns and multi-color options
- Test swatches on both product cards and product pages
- Ensure color names are descriptive for screen readers