Buy X get Y styling

This page is for theme developers. It lists the classes, states and CSS custom properties of the Buy X get Y widget. It has two parts: the product page banner (an <andor-bundle> host) and the cart claim row (inside an <andor-claim> host).

The widget comes from the AndOr Offer picker block and the pasted <andor-offer-picker> and <andor-claim> tags. The cart drawer copy of the claim row comes from the app embed.

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.

Product page banner

Cart claim row

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 Buy X get Y:

• Button color is written inline on each host, but only when the merchant changed it from #c0392b. Left on the default, the inline value is var(--andor-color-accent), so a :root rule or the brand color reaches it.
• Both parts read the global AndOr tokens first, so most stores only need a few custom properties.

Tip Change a custom property rather than a part’s own padding, height or font-size. The widgets print a skeleton at the finished size, and the custom properties size both.

Product page banner

Host: <andor-bundle class="andor-bundle" data-andor-widget="bxgy">.

Parts

States and data attributes

Custom properties

“Accent” is the block’s Button color, written inline on the host as --andor-bundle-accent, then --andor-color-accent, then #c0392b.

Cart claim row

Host: <andor-claim class="andor-claim">, on the cart page (the block) and in the cart drawer (the app embed’s copy). A Buy X get Y box is .andor-claim__box:not(.andor-claim__box--gift).

Parts

States and data attributes

Caution Style states with color, not size. A state attribute is written only on the drawn box, so a size change per state makes the cart move when the box is drawn.

Custom properties

“Accent” is the block’s Button color, written inline as --andor-claim-accent, then --andor-color-accent, then #c0392b.

Examples

A green banner once checkout applied the deal:

andor-bundle[data-andor-progress="won"] {
  --andor-bundle-text-color: #1f5f3a;
  --andor-bundle-fill-color: #1f5f3a;
}

Dawn: match the theme’s buttons and color scheme.

andor-bundle:is([data-andor-widget="bxgy"], [data-andor-widget="gift"]) {
  --andor-bundle-track-background: rgba(var(--color-foreground), 0.08);
  --andor-bundle-fill-color: rgb(var(--color-foreground));
  --andor-bundle-text-font-weight: 600;
}

andor-claim {
  --andor-claim-border-color: rgba(var(--color-foreground), 0.3);
  --andor-claim-radius: var(--popup-corner-radius, 0);
  --andor-claim-button-background: rgb(var(--color-button));
  --andor-claim-button-border-color: rgb(var(--color-button));
  --andor-claim-button-color: rgb(var(--color-button-text));
  --andor-claim-button-radius: var(--buttons-radius, 0);
}

Horizon:

andor-bundle:is([data-andor-widget="bxgy"], [data-andor-widget="gift"]) {
  --andor-bundle-track-background: var(--color-border);
  --andor-bundle-fill-color: var(--color-foreground);
  --andor-bundle-text-font-weight: 600;
}

andor-claim {
  --button: var(--color-primary-button-background);
  --andor-claim-border-color: var(--color-border);
  --andor-claim-button-background: var(--button);
  --andor-claim-button-border-color: var(--button);
  --andor-claim-button-color: var(--color-primary-button-text);
  --andor-claim-button-radius: var(--style-border-radius-buttons-primary);
}

Note The theme variable names were checked against Dawn 16.0.0 and Horizon 4.2.0. A later theme version may rename them.

Caution Never force a hidden part back on. Hidden parts carry hidden and an inline display: none. A rule like andor-bundle { display: block } can show a deal that ended.