B3 Swatches Article
Swatch Types
Use button, color, image, or number swatches, then add dual-color rendering when an option needs two tones.
Swatch type decides what the customer sees for each option: text, color, image, or number. Defaults usually live on the attribute term, and product-level overrides let you change that output for a specific product.
Browse docs
On this page
Core swatch types
Button, color, image, and number swatches cover the main storefront cases.
Most catalogs only need four outputs: button, color, image, or number. Pick the type that communicates the option fastest, then use product overrides only when a specific product needs something different.
- Button
- Best for sizes, materials, or short names. Button swatches can stay text-only or use an optional color behind the text.
- Color
- Use when the color itself is the decision. The term stores the swatch color and the frontend renders that as the option surface.
- Image
- Use for patterns, finishes, and anything a flat color cannot explain. The image size comes from the General tab.
- Number
- Use for numeric options such as counts or measurements. A number swatch can also take an optional supporting color.
Dual-color support
Enable a second color when one option needs to communicate a paired palette.
Dual-color output is controlled in two places. First, turn on Dual Color Support in the Advanced tab. Then assign a secondary color on the term or
in a product override. Once both are in place, the swatch can render as a
split two-tone option.
Where to configure types
Set defaults on attribute terms and use product overrides only where a product needs different output.
Use attribute terms for the default swatch data that should apply
everywhere. Use the product data Swatches tab when one product needs a
different label, image, number, color, or hide-text rule than the global
default.
After the type is stable, move to
Layouts Overviewso the selector occupies space in a way that matches the option count.