Current offers styling

On this page

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

This page is for theme developers. It lists every class, state and CSS custom property of the current offers list, <andor-offers class="andor-offers">.

The widget comes from the AndOr Offers block. It uses AndOr’s widget styles. Liquid prints skeleton rows, and a script draws the real rows into them.

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.

Current offers

Buy 2, save 10%On all mugs

Free shipping over $50On everything

10% off with WELCOME10On your first order

No.	Token	What it changes
1	`--andor-offers-accent`	the deal line
2	`--andor-offers-border-color`	the row divider
3	`--andor-offers-item-padding`	row padding
4	`--andor-offers-scope-font-size`	the scope line under a deal
5	`--andor-offers-heading-space`	space under the heading

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 list:

The accent is inline. The block writes --andor-offers-accent into the host’s style on every render. A stylesheet rule on it needs !important.
Divider line, text size and spacing go into a block-scoped rule, and only when changed from the default.

Parts

Class	What it is
`.andor-offers`	The list’s host
`.andor-offers__heading`	The heading (an `h2`, `h3`, `h4` or `p`)
`.andor-offers__list`	The `ul`, with bullets removed
`.andor-offers__item`	One deal row
`.andor-offers__title`	The deal’s name
`.andor-offers__deal`	“Save 20%”, or the code
`.andor-offers__scope`	“Storewide”, the collection, or “Selected collections”
`.andor-code__button`	The copy button, on code rows
`.andor-code__status`	The visually hidden “Copied” status
`.andor-vh`	The visually hidden “Applies to” prefix

States and data attributes

Attribute or class	On	Value and meaning
`data-andor-drawn`	host	The rows are drawn. Before that, the skeleton shimmers
`data-andor-reactive`	host	Rows follow the variant picker
`data-andor-widget-id`	host	The block id
`.andor-offers__deal--applied`	deal span	The code is already applied
`data-andor-widget`	row	`offer`
`data-andor-state`	row	`active` or `hidden`. A styling hook
`hidden`	row	The deal is not live now
`data-andor-discount-id`	row	The deal’s discount
`data-andor-kind`	row	`percentage`, `amount_each` or `amount_spread`
`data-andor-mode`	row	`price` or `badge_only`
`data-andor-starts`	row	Start time, ISO 8601
`data-andor-ends`	row	End time, ISO 8601. Absent means it never ends

Note the split: the block id is on the host, and each row is its own widget. A row’s data-andor-state never reads applied. Style an applied row through .andor-offers__deal--applied.

Caution Hidden rows have both hidden and an inline display: none. Never force them visible. Style the hidden state with .andor-offers__item[hidden] if you need to.

Custom properties

Property	Default	What it does
`--andor-offers-accent`	Block setting, inline	The deal line color
`--andor-offers-applied-color`	muted, then `#6d7175`	An applied code
`--andor-offers-font-size`	`inherit`	Size
`--andor-offers-space-block-start`	`0`	Margin above
`--andor-offers-space-block-end`	`0`	Margin below
`--andor-offers-heading-space`	`0.5em`	Space under the heading
`--andor-offers-gap`	`0.5em`	Space inside a row
`--andor-offers-item-padding`	`0.4em 0`	Row padding
`--andor-offers-border-color`	border, then black at 8%	Row divider
`--andor-offers-title-font-weight`	`600`	Name weight
`--andor-offers-deal-font-weight`	`600`	Deal weight
`--andor-offers-scope-font-size`	`0.85em`	Scope size
`--andor-offers-scope-opacity`	`0.7`	Scope fade

“Muted” is --andor-color-muted and “border” is --andor-color-border.

Examples

Dawn. Its colors are RGB numbers, so wrap them in rgba():

andor-offers {
  --andor-offers-border-color: rgba(var(--color-foreground), 0.1);
  --andor-offers-title-font-weight: 400;
  --andor-offers-item-padding: 0.8rem 0;
}

CSS

Horizon:

andor-offers {
  --andor-offers-border-color: var(--color-border);
  --andor-offers-title-font-weight: var(--font-body--weight, 400);
}

CSS

Events

Each row is an event host with widgetType: "offer". A list of five deals sends five andor:widget:mount events. Rows have no widget id or product id, so walk up to the nearest andor-offers to find the block:

document.addEventListener("andor:display:change", (event) => {
  if (event.detail.resource.widgetType !== "offer") return;
  const block = event.target.closest("andor-offers");
  console.log("row in block:", block?.dataset.andorWidgetId);
});

JavaScript

See Events for the payload fields.