Color Swatch
Last updated: August 5, 2025
Color Swatch Feature
Feature Overview
The Color Swatch feature enables a visual and interactive way for shoppers to explore and select different product color variants—directly on Product Detail Pages (PDPs) and product listings. Swatches appear as tappable icons that represent each available color or pattern, making variant selection more intuitive and engaging.
Color swatches can display as solid colors (e.g., hex codes) or custom image thumbnails (e.g., floral patterns or tie-dye). Selecting a swatch can either update the product display or redirect the user to the corresponding variant’s product page.
This feature is designed for a mobile-first shopping experience and supports touch-friendly layouts, accessibility, and fast performance.
Configuration
Color swatches can be implemented using one of the following methods:
1. Shopify Metafields
Use a metafield (e.g.,
color_variants) of type Product list to define and group color variant products.The app reads this metafield to display relevant swatches on the PDP.
2. Third-Party Integration (Swatch King)
Swatch King allows you to group SKU-level products into a variant set and display them as swatches.
Integration with Swatch King has been supported since November 2024.
Customization Options
You can configure the appearance and behavior of the color swatches through the visual editor:
SettingDescription | |
Swatch Shape | Choose between circles or squares |
Swatch Size | Small, medium, or large |
Color Source | Solid color (hex code) or uploaded image |
Tap Behavior | Update display or navigate to variant product page |
Display Placement | Show on PDP, product listings, or both |
Border/Shadow Styling | Customize selection state and hover effects |
Feature Use Cases
Let users quickly switch between different color options of a product
Visually differentiate color styles, such as prints or textures
Help users discover alternate variants from product listing pages
Provide a more mobile-optimized and intuitive selection experience
Improve product discoverability by linking related SKUs
Troubleshooting / FAQ
1. Why are some swatches not visible?
Swatches may not appear if color names in metafields are written in uppercase.
Metafield visibility might be turned off due to third-party app interference (e.g., Swatch King).
Confirm that the metafield is of type Product list and is correctly configured.
2. Why is a white swatch showing instead of the correct color?
If an invalid hex code or incorrect metafield value is used, the app may render a default white swatch.
3. Why do all images continue to show even after selecting a specific color?
This is a known issue where unrelated images persist after swatch selection. A fix for isolating variant-specific images is expected in an update after December 2024.
4. Why doesn’t the image carousel reset when switching colors?
Upon color change, the PDP carousel may jump to the last image instead of resetting to the first. This behavior is under review for improvement.
5. Can I change the size of the color icons on PDP?
While some layout adjustments are available, global styling limitations (e.g., shared widgets) may restrict icon size customization without additional development.
6. Is the feature accessible for users with assistive devices?
Yes, the swatches support screen readers, keyboard navigation, and meet touch target standards for accessibility.