See it in action Free gift slot styling
On this page
This page is for theme developers. It lists the classes, states and CSS
custom properties of the free gift widget. It has two parts: the
product page line (an <andor-bundle data-andor-widget="gift"> host)
and the gift slot in the cart (a box inside the <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 slot 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.
Free gift over $506
| No. | Token | What it changes |
|---|---|---|
| 1 | --andor-claim-gift-border-color | the gift box border |
| 2 | --andor-claim-gift-background | the gift box fill |
| 3 | --andor-claim-slot-image-size | the gift’s picture |
| 4 | --andor-claim-progress-track | the bar’s track |
| 5 | --andor-claim-progress-color | the bar’s fill |
| 6 | --andor-claim-title-color | the title |
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 free gift:
- Button color is written inline on each host, but only when the
merchant changed it from
#c0392b. - Style states through the
data-andor-stateattribute, never through the words. The words change with the cart and the language.
Tip Set custom properties rather than a part’s own size. The slot is one box of a fixed shape, so the cart never moves when it changes state.
Product page line
The gift line is the sentence
alone: .andor-bundle__text, with no bar. It uses the same host, states
and custom properties as the
Buy X get Y banner.
States and data attributes
| Attribute | On | Values |
|---|---|---|
data-andor-widget |
host | gift |
data-andor-progress |
host | locked, unlocked, won or off |
data-andor-ready |
host | drawn. Before that, it shimmers |
Gift slot
The gift’s box is
.andor-claim__box--gift inside <andor-claim class="andor-claim">. It
takes every claim row token, plus
its own tokens below.
Parts
| Class | What it is |
|---|---|
.andor-claim__box--gift |
the gift’s box |
.andor-claim__title |
“You unlocked a free gift” |
.andor-claim__slot |
the one row: picture, text, button |
.andor-claim__img |
one gift’s picture |
.andor-claim__img--none |
a gift product with no image: a gift mark |
.andor-claim__stack |
several gifts’ pictures, overlapped |
.andor-claim__more |
“+2” after three pictures |
.andor-claim__body |
the row’s text |
.andor-claim__name |
the gift, the requirement, or “3 gifts” |
.andor-claim__price |
“$20.00 Free”, only when sure |
.andor-claim__was |
the struck price |
.andor-claim__now |
“Free” |
.andor-claim__progress |
the thin <progress> bar while locked |
.andor-claim__go |
Add gift, Choose gift or Remove gift |
States and data attributes
data-andor-state on .andor-claim__box--gift is one of:
| Value | Meaning |
|---|---|
locked |
not earned yet: greyed, no button |
adding |
an automatic add is running (aria-busy="true") |
choose |
earned: add it, or choose one |
removed |
the shopper removed it: “Add it back” |
gone |
chosen, and the cart stopped qualifying |
won |
one line: checkout applied it |
off |
one line: in the cart, another discount won |
| Attribute or class | On | Meaning |
|---|---|---|
.andor-claim__box--locked |
box | the same as locked |
.andor-claim__box--note |
box | won and off: one line |
data-andor-act |
.andor-claim__go |
add, open or remove |
data-andor-ready |
host | drawn from the cart. Before that, boxes shimmer |
data-andor-place |
host | cart_page or cart_drawer |
data-andor-act="open" is the button that opens the
gift chooser.
Custom properties
| Property | Default | Controls |
|---|---|---|
--andor-claim-gift-border-width |
1px |
gift box border |
--andor-claim-gift-border-style |
solid |
gift box border |
--andor-claim-gift-border-color |
--andor-color-border, 12% ink |
gift box border |
--andor-claim-gift-background |
the box fill | gift box fill |
--andor-claim-slot-image-size |
3em |
the gift’s picture |
--andor-claim-locked-opacity |
0.6 |
a locked row |
--andor-claim-stack-border-color |
#ffffff |
ring between pictures |
--andor-claim-progress-height |
0.4em |
locked bar height |
--andor-claim-progress-track |
--andor-color-border |
locked bar track |
--andor-claim-progress-color |
the claim accent | locked bar fill |
The claim accent is the block’s Button color, written inline as
--andor-claim-accent. It colors the buttons and “Free”
(--andor-claim-now-color).
Examples
Tint the slot once the gift is earned:
.andor-claim__box--gift[data-andor-state="choose"] {
--andor-claim-gift-background: #f4f0ff;
--andor-claim-gift-border-color: #5b3fd1;
}Make the locked progress bar thinner:
andor-claim {
--andor-claim-progress-height: 0.25em;
}Dawn:
andor-claim {
--andor-claim-gift-border-color: rgba(var(--color-foreground), 0.15);
--andor-claim-stack-border-color: rgb(var(--color-background));
}
.andor-claim__box--gift[data-andor-state="choose"] {
--andor-claim-gift-background: rgba(var(--color-foreground), 0.03);
}Horizon:
andor-claim {
--andor-claim-gift-border-color: var(--color-border);
--andor-claim-stack-border-color: var(--color-background);
}
.andor-claim__box--gift[data-andor-state="choose"] {
--andor-claim-gift-border-color: var(--color-foreground);
}Caution Never force a hidden part back on. Hidden parts carry
hiddenand an inlinedisplay: none.