Savings badge styling

On this page

What each token changes
Parts
States and data attributes
Custom properties
Examples

Put CSS in your theme or in the embed’s Custom CSS box. For how tokens work across widgets, see Styling tokens.

Caution The block writes the background and text colors inline. Changing --andor-badge-background or --andor-badge-color from CSS needs !important.

What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below.

Clay bowl

Save 20%

No.	Token	What it changes
1	`--andor-badge-background`	the fill
2	`--andor-badge-color`	the text
3	`--andor-badge-padding`	padding
4	`--andor-badge-radius`	corners
5	`--andor-badge-font-size`	text size

Parts

Class	What it is
`.andor-badge`	The host
`.andor-code`	The code chip
`.andor-code__button`	The copy button
`.andor-code__status`	The hidden “Copied” status

Warning Never force a hidden badge visible with a rule like andor-badge { display: block }. It would bring back an ended sale.

States and data attributes

Attribute	Values
`data-andor-state`	`active`, `hidden` or `applied`
`data-andor-kind`	`percentage`, `amount_each` or `amount_spread`
`data-andor-mode`	`price` or `badge_only`
`data-andor-widget`	`badge`, on the visible badge only
`data-andor-widget-id`	The block id
`data-andor-discount-id`	The discount shown
`data-andor-starts`, `data-andor-ends`	ISO 8601 times. No `ends` means it never ends.
`data-andor-candidate`	`badge`, on every pre-drawn variant badge
`hidden`	No deal for this variant now

Custom properties

Token	Default	What it does
`--andor-badge-background`	Block setting	Fill
`--andor-badge-color`	Block setting	Text color
`--andor-badge-padding`	`0.15em 0.55em`	Padding
`--andor-badge-radius`	`0.25em`	Corners. Does not follow `--andor-radius`.
`--andor-badge-font-size`	`0.85em`	Size
`--andor-badge-font-weight`	`600`	Weight
`--andor-badge-applied-background`	Black at 6%	Fill when the code is applied
`--andor-badge-applied-color`	`#6d7175`	Text when the code is applied
`--andor-badge-space-block-start`	`0`	Margin above
`--andor-badge-space-block-end`	`0`	Margin below

Examples

Match Dawn’s sale badge:

andor-badge {
  --andor-badge-background: rgb(var(--color-badge-background)) !important;
  --andor-badge-color: rgb(var(--color-badge-foreground)) !important;
  --andor-badge-radius: var(--badge-corner-radius, 4rem);
  --andor-badge-padding: 0.5rem 1.3rem 0.6rem;
}

CSS

Match Horizon’s primary button:

andor-badge {
  --andor-badge-background: var(--color-primary-button-background) !important;
  --andor-badge-color: var(--color-primary-button-text) !important;
  --andor-badge-radius: var(--style-border-radius-pills, 40px);
}

CSS