Gift chooser styling

On this page

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

This page is for theme developers. It lists the classes, states and CSS custom properties of the gift chooser, an <andor-quickview> dialog.

The chooser has no block. The cart gift slot opens it, and JavaScript builds it. Every class is andor-qv__<part>, stable across releases. AndOr adds its styles the first time the chooser is needed, so a cart that never shows a chooser loads none of 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.

Choose your gift

Linen clothFree

SandSage

Clay mugFree

No.	Token	What it changes
1	`--andor-qv-bg`	the window background
2	`--andor-qv-radius`	window corners
3	`--andor-qv-sale`	the “Free” price
4	`--andor-qv-pill-border`	an option pill’s border
5	`--andor-qv-pill-selected-bg`	the picked pill’s fill
6	`--andor-qv-button-bg`	the main button’s fill
7	`--andor-qv-backdrop`	the dimmed page behind the window

How precedence works

The chooser has no block settings and no inline styles. Its colors fall back to the global AndOr tokens, so a store that sets nothing still gets a styled dialog. Set custom properties on .andor-qv or any ancestor, or on :root to cover the whole store. Put your CSS in your theme’s stylesheet or in the app embed’s Custom CSS box. Full details: Styling tokens.

Parts

Class	What it is
`.andor-qv`	the dialog
`.andor-qv__panel`	its one child, a flex column
`.andor-qv__grab`	the phone’s grab bar
`.andor-qv__head`, `.andor-qv__titles`, `.andor-qv__title`, `.andor-qv__step`	the header
`.andor-qv__back`, `.andor-qv__close`	the header’s icon buttons
`.andor-qv__tray`, `.andor-qv__slot`	the slot tray, for two gifts or more
`.andor-qv__slot-img`, `.andor-qv__slot-text`, `.andor-qv__slot-name`, `.andor-qv__slot-pick`, `.andor-qv__slot-clear`	parts of one tray slot
`.andor-qv__body`	the scrolling middle
`.andor-qv__grid`, `.andor-qv__cell`, `.andor-qv__card`	step 1: the card grid
`.andor-qv__card-img`, `.andor-qv__card-name`, `.andor-qv__card-action`	parts of one card
`.andor-qv__price`	a struck price and “Free”
`.andor-qv__detail`, `.andor-qv__media`, `.andor-qv__info`, `.andor-qv__name`, `.andor-qv__price-line`	step 2
`.andor-qv__option`, `.andor-qv__legend`, `.andor-qv__legend-name`, `.andor-qv__legend-value`, `.andor-qv__values`	an option group
`.andor-qv__value` with `.andor-qv__value--pill` or `.andor-qv__value--swatch`	one value
`.andor-qv__radio`, `.andor-qv__swatch`, `.andor-qv__value-text`	inside a value
`.andor-qv__error`	the failed add line (`role="alert"`)
`.andor-qv__foot`, `.andor-qv__count`, `.andor-qv__add`	the footer and its one button

States and data attributes

Attribute	On	Values
`data-step`	`.andor-qv`	`products` (step 1) or `options` (step 2)
`data-busy`	`.andor-qv`	present while the add runs
`data-kind`	`.andor-qv__option`	`swatch` or `pill`
`data-state`	`.andor-qv__value`	`on` (chosen), `off` (not chosen), or `out` (sold out or not free)
`data-state`	`.andor-qv__slot`	`filled`, `active` or `empty`
`data-variants`	`.andor-qv__card`	the number of available variants

The Add button also gets your theme’s checkout button classes ([name="checkout"]) when the page has one.

Custom properties

Each falls back to the global AndOr token, then to a literal.

Property	Default
`--andor-qv-bg`	`--andor-color-bg`, `#ffffff`
`--andor-qv-text`	`--andor-color-text`, `#121212`
`--andor-qv-muted`	`--andor-color-muted`, `#6d7175`
`--andor-qv-border`	`--andor-color-border`, 14% ink
`--andor-qv-accent`	the slot accent, `--andor-color-accent`
`--andor-qv-sale`	`--andor-color-sale`, `#c0392b` (“Free”)
`--andor-qv-radius`	twice `--andor-radius`
`--andor-qv-gap`	`12px`
`--andor-qv-pad`	`20px`
`--andor-qv-width`	`640px` (desktop)
`--andor-qv-swatch-size`	`32px`
`--andor-qv-pill-radius`	`999px`
`--andor-qv-pill-border`	the border color
`--andor-qv-pill-selected-bg`	the text color
`--andor-qv-pill-selected-text`	the background color
`--andor-qv-button-bg`	the accent
`--andor-qv-button-text`	`--andor-color-on-accent`, `#ffffff`
`--andor-qv-backdrop`	45% ink

“Ink” means black at that opacity.

Phone layout

Below 750px the dialog is a bottom sheet: full width, at most 85% of the screen tall, rounded top, a grab bar, one card per row, and a footer padded for the phone’s safe area. It slides up in 200ms, and not at all when the shopper prefers reduced motion.

Examples

Square swatches, like a theme’s own swatch picker:

.andor-qv__swatch,
.andor-qv__value--swatch {
  border-radius: 4px;
}

CSS

Dawn reads its color scheme from the drawer, so the chooser can use it:

.andor-qv {
  --andor-qv-bg: rgb(var(--color-background));
  --andor-qv-text: rgb(var(--color-foreground));
  --andor-qv-border: rgba(var(--color-foreground), 0.12);
  --andor-qv-radius: var(--popup-corner-radius, 0);
  --andor-qv-pill-radius: var(--variant-pills-radius, 40px);
  --andor-qv-pill-border: rgba(var(--color-foreground), 0.55);
}

assets/base.css

Horizon:

.andor-qv {
  --andor-qv-bg: var(--color-background);
  --andor-qv-text: var(--color-foreground);
  --andor-qv-border: var(--color-border);
  --andor-qv-radius: var(--style-border-radius-popover, 12px);
  --andor-qv-pill-radius: var(--style-border-radius-pills, 40px);
  --andor-qv-swatch-size: var(--variant-picker-swatch-width, 32px);
}