Variant picker and swatches
Claro offers multiple ways for customers to select product variants.
Picker types
| Type | Description |
|---|---|
| Dropdown | Standard select dropdown for each option |
| Button | Clickable buttons/pills for each option value |
Color swatches
When enabled, color options display as circular color swatches instead of text buttons.
| Setting | Description |
|---|---|
| Enable color swatches | Show swatches for color options |
| Swatch size | Small / Medium / Large |
Configuring swatches
Swatches are configured in Theme settings → Color swatches:
- Trigger words — option names that trigger swatch display (default: "Color, Colour, Couleur, Farbe, Renk")
- Color mappings — map color names to hex values or image files
Claro also supports Shopify's native swatch.image and swatch.color metafields for swatch configuration.
Variant images
When a customer selects a variant, the product gallery automatically scrolls to the variant's assigned image.