Theme Editor - Availability indicator - TWICE Commerce

Availability indicator settings panel in the theme editor — Theme Editor > Availability indicator

The Availability indicator panel styles the status dot and its accompanying text. The indicator is shared: it appears inside the pickup availability card on the listing page and on the listing availability line on collection pages. Found under Cards in the theme editor.

Colors

Setting	Default	Description
Available	`#17B26A`	Dot colour when the listing is available.
Unavailable	`#D0D5DD`	Dot colour when the listing is unavailable.
Text	`#374152`	Colour of the text next to the dot.

CSS variables

:root {
  --storefront-availability-indicator-available-color: #17B26A;
  --storefront-availability-indicator-unavailable-color: #D0D5DD;
  --storefront-availability-indicator-text-color: #374152;
}

Pickup availability

Style the card the indicator appears in.

Availability

How availability is determined.