Customize
How swatches look and behave comes down to two areas of the app:
- Appearance controls how swatches render - shape, size, display mode, tooltips, out-of-stock styling, and swatch order.
- Settings controls which products show up and how swatch text is translated.
Both the product-group widget and variant swatches have their own appearance settings, under the Product groups and Variant swatches tabs on the Appearance page.
In this section
Section titled “In this section”- Display options - list or slider layout, showing the active swatch first, limiting how many swatches appear, tooltips, and labels.
- Swatches on collection cards - per-card limits, the “+N” counter, count-only mode, and what clicking a swatch does.
- Out-of-stock and inactive products - how unavailable variants render and how to hide products that aren’t for sale.
- Translations and markets - translate swatch names and option names per language and market.
- Custom CSS - style swatches beyond the built-in settings with your own CSS.
Splitting swatches into sections
Section titled “Splitting swatches into sections”To break a long swatch list into labeled sections like Core and Limited while keeping them on the same product page, use linked groups.