See it in action Sale price styling
On this page
This page is for theme developers. It lists every class, state and CSS
custom property of the sale price widget, <andor-price class="andor-price">.
The widget comes from the AndOr Sale price block and the pasted
<andor-price> tag. It uses AndOr’s widget styles.
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. For every layout the block offers, see Looks.
| No. | Token | What it changes |
|---|---|---|
| 1 | --andor-sale-color | the sale amount and the badge |
| 2 | --andor-original-color | the struck amount |
| 3 | --andor-price-gap | space between the parts |
| 4 | --andor-price-badge-border-color | the badge border |
| 5 | --andor-price-badge-radius | badge corners |
| 6 | --andor-price-badge-background | the badge fill |
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 sale price:
- No inline colors. The color and size settings go into a block-scoped rule, and only when changed from the default.
- So an untouched block follows the app embed’s colors and a
:rootrule.
Parts
| Class | What it is |
|---|---|
.andor-price |
The whole price line (the <andor-price> host) |
.andor-price__original |
The struck original amount, an <s> |
.andor-price__sale |
The sale amount |
.andor-price__badge |
The optional badge after the amounts |
.andor-price__label |
A visually hidden label (“Regular price”, “Sale price”). Do not restyle |
States and data attributes
| Attribute | On | Value and meaning |
|---|---|---|
data-andor-state |
host | active or hidden. A styling hook |
data-andor-kind |
host | percentage or amount_each, the winning discount’s kind |
data-andor-mode |
host | Always price |
data-andor-widget-id |
host | The block id |
data-andor-product-id |
host | The product id, when known |
data-andor-variant-id |
host | The variant the price is shown for |
hidden |
host | No sale for this variant now |
data-andor-original-amount |
original span | The node the script reads the money format from |
data-andor-sale-amount |
sale span | The only node the script rewrites |
The host also carries data-descriptors, data-price, data-currency
and data-best-id. They are frozen names that the price script reads.
Do not rename or remove them.
Caution A hidden widget has both
hiddenand an inlinedisplay: none. Never force it visible with a rule likeandor-price { display: block }. That would bring back an ended sale. Styleandor-price[hidden]or[data-andor-state="hidden"]instead.
Custom properties
| Property | Default | What it does |
|---|---|---|
--andor-sale-color |
accent, then #c0392b |
Sale amount and badge color |
--andor-original-color |
muted, then #6d7175 |
Struck amount color |
--andor-price-gap |
--andor-space, then 0.4em |
Space between the parts |
--andor-price-font-size |
inherit |
Size of the whole line |
--andor-price-font-weight |
600 |
Sale amount weight |
--andor-price-space-block-start |
0 |
Margin above |
--andor-price-space-block-end |
0 |
Margin below |
--andor-price-badge-padding |
0.1em 0.5em |
Badge padding |
--andor-price-badge-border-color |
currentColor |
Badge border |
--andor-price-badge-radius |
0.2em |
Badge corners |
--andor-price-badge-background |
transparent |
Badge fill |
--andor-price-badge-font-size |
0.85em |
Badge size |
“Accent” is --andor-color-accent and “muted” is
--andor-color-muted. Both are global tokens.
Examples
Match Dawn’s own sale price. Dawn’s colors are RGB numbers, so wrap them
in rgb() or rgba():
andor-price {
--andor-original-color: rgba(var(--color-foreground), 0.75);
--andor-sale-color: rgb(var(--color-foreground));
--andor-price-font-size: 1.6rem;
--andor-price-badge-radius: var(--badge-corner-radius, 4rem);
}Horizon uses full colors, so use them as they are:
andor-price {
--andor-original-color: var(--color-foreground-muted, #666);
--andor-sale-color: var(--color-foreground);
--andor-price-badge-radius: var(--style-border-radius-pills, 40px);
}Check the theme variable names in the theme version you run.