Theme Editor - Variant pills - TWICE Commerce

Variant pills settings panel in the theme editor — Theme Editor > Variant pills

The Variant pills panel controls the pill buttons a customer taps to choose a variant — such as size or colour — on a listing page.

Settings

Setting	Type	Default	Description
Corner radius	Slider	8 px	How rounded each pill is.
Border color	Color	`#cbcbcb`	Border colour of an unselected pill.
Border thickness	Slider	1 px	Border width of each pill.
Selected background	Color	`transparent`	Background fill of the selected pill.
Selected text	Color	`#111826`	Text colour of the selected pill.

CSS variables

:root {
  --storefront-variant-pill-border-radius: 8px;
  --storefront-variant-pill-border-color: #cbcbcb;
  --storefront-variant-pill-border-width: 1px;
  --storefront-variant-pill-selected-background-color: transparent;
  --storefront-variant-pill-selected-text-color: #111826;
}

Variants

How variants group options under a listing.

Listing page

Configure the listing page where pills appear.