Discount callout styling

On this page

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

This page is for theme developers. It lists the classes, states and CSS custom properties of the discount callout, <andor-discount-callout class="andor-callout">.

The widget comes from the AndOr Discount callout block and the pasted <andor-discount-callout> tag. It uses AndOr’s widget styles. Liquid renders it whole and it runs no JavaScript, so CSS is the only way to change it. It has role="note".

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.

Free shipping on orders over $50

No.	Token	What it changes
1	`--andor-callout-background`	the fill
2	`--andor-callout-border-color`	the border
3	`--andor-callout-radius`	corners
4	`--andor-callout-icon-color`	the icon
5	`--andor-callout-color`	the text
6	`--andor-callout-padding`	padding

How precedence works

Put your CSS in your theme’s stylesheet or in the app embed’s Custom CSS box. To see which value wins, read Which value wins.

What this means for the callout:

Colors and corners are inline. The block writes --andor-callout-background, --andor-callout-color, --andor-callout-border-color and --andor-callout-radius into the host’s style on every render. A stylesheet rule on those four needs !important, or target the CSS property itself (andor-discount-callout { background: ... }).

Parts

Class	What it is
`.andor-callout`	the pill, an `<andor-discount-callout>`
`.andor-callout__icon`	the icon, a CSS mask over its color
`.andor-callout__text`	the sentence

States and data attributes

Attribute or class	On	Meaning
`.andor-callout__icon--truck`	icon	the chosen icon: `truck`, `percent`, `tag`, `gift`, `check` or `cart`
`.andor-callout--pasted`	host	a pasted tag, with the block’s default colors
`data-andor-discount-id`	host	gated mode: the id of the discount it shows for
`data-andor-sample`	host	theme editor only: the dashed sample
`hidden`	host	the discount it waits for is not live

The icon is display: none by default and turns on only in browsers that support CSS masks. Without mask support, or with No icon, the pill shows its background, border and text, and no empty icon space.

Custom properties

Property	Default	Controls
`--andor-callout-background`	block setting, inline	fill
`--andor-callout-color`	block setting, inline	text and icon
`--andor-callout-border-color`	block setting, inline	border
`--andor-callout-radius`	block setting, inline	corners
`--andor-callout-space-block-start`	`0`	margin above
`--andor-callout-space-block-end`	`0`	margin below
`--andor-callout-padding`	`0.5em 0.85em`	padding
`--andor-callout-border-width`	`1px`	border width
`--andor-callout-gap`	`0.5em`	icon to text
`--andor-callout-font-size`	`inherit`	text size
`--andor-callout-font-weight`	`500`	text weight
`--andor-callout-line-height`	`1.3`	line height
`--andor-callout-icon-size`	`1.15em`	icon size
`--andor-callout-icon-color`	`currentColor`	icon color

Unset, the four inline properties fall back to the border token at 12% ink, the radius token at 6px, transparent and inherit. A pasted tag carries the block’s default colors through .andor-callout--pasted.

Examples

Colors for every pasted pill, in the app embed’s Custom CSS box:

.andor-callout--pasted {
  --andor-callout-background: #fff4e5;
  --andor-callout-color: #5c3a00;
  --andor-callout-border-color: #ffd699;
}

CSS

Dawn:

andor-discount-callout {
  --andor-callout-font-weight: 400;
  --andor-callout-icon-color: rgb(var(--color-foreground));
  --andor-callout-radius: var(--badge-corner-radius, 4rem) !important;
}

assets/base.css

Horizon:

andor-discount-callout {
  --andor-callout-font-weight: var(--font-body--weight, 400);
  --andor-callout-border-color: var(--color-border) !important;
  --andor-callout-radius: var(--style-border-radius-pills, 40px) !important;
}