Skip to Content
DocumentationTheme SettingsSwatches

Swatches

The Swatches Theme settings group controls global visual swatch behavior and appearance.

Use Variant Pickers and Swatches for the full setup workflow across product option data, global settings, product-card swatches, and the Product page Variant picker block.

Fit Check theme editor showing Swatches Theme settings with variant image, sold-out indicator, dimensions, border, opacity, and gap controls.
Swatches owns visual swatch behavior: variant images, sold-out indicator, width, height, radius, border style, border width, border opacity, and gap. Variant text option colors remain in Variant pickers.
SettingUse it for
Variant imagesShow variant images as swatches when product variant images are available.
Sold out indicatorChoose how unavailable swatches are marked.
Width and heightSet visual swatch dimensions.
Border radiusSet swatch shape.
BorderChoose border style.
Border width and opacityTune swatch border appearance when borders are enabled.
Swatch gapSet spacing between swatches.

Ownership Notes

  • Variant picker text option, selected state, underline, and dropdown colors are in Variant pickers.
  • Product option names and block-level picker modes are configured in the Variant picker block.
Variant pickersGift card