Goal suggestions styling

On this page

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

This page is for theme developers. It lists the classes, states and CSS custom properties of the goal suggestions row.

The row sits inside the goal bar’s <andor-goal> host, so every goal bar token and preset reaches it too. It comes from the AndOr Order goal block and a Goal suggestions upsell offer. It uses AndOr’s widget styles. Liquid prints one card as a skeleton. Three columns hold one to three cards at the same height, so the page does not move when the products arrive.

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.

Add $15.00 to get 10% off

Clay mug$18.00

Linen cloth$15.00

Oak board$24.00

No.	Token	What it changes
1	`--andor-goal-offer-image-radius`	picture corners
2	`--andor-goal-offer-title-color`	the product name
3	`--andor-goal-offer-price-color`	the price
4	`--andor-goal-offer-button-background`	the button fill
5	`--andor-goal-offer-button-color`	the button text
6	`--andor-goal-offer-button-radius`	button corners
7	`--andor-goal-offer-gap`	space between cards

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

The Add buttons use the goal bar’s accent, --andor-goal-accent. The block writes it inline only when Bar color is changed from the default. See Goal bar styling.

Parts

Class	What it is
`.andor-goal__offer`	the row under the bar
`.andor-goal__offer-text`	the offer message, for example “$40.00 more gets 20% off. Try:”
`.andor-goal__offer-list`	the three columns
`.andor-goal__offer-item`	one product card
`.andor-goal__offer-image`	the picture (an `img`, or a `span`)
`.andor-goal__offer-title`	the product name, a link, two lines
`.andor-goal__offer-price`	the price
`.andor-goal__offer-add`	the Add button

States and data attributes

Attribute or class	On	Meaning
`data-andor-ready`	`.andor-goal__offer`	drawn. Before that, it shimmers
`hidden`	`.andor-goal__offer`	no suggestions for this cart
`:disabled`	`.andor-goal__offer-add`	the add is running

Custom properties

Property	Default	Controls
`--andor-goal-offer-space`	`1em`	space above the row
`--andor-goal-offer-text-space`	`0.5em`	space under the sentence
`--andor-goal-offer-gap`	`0.75em`	space between cards
`--andor-goal-offer-font-size`	`0.875em`	card text
`--andor-goal-offer-image-radius`	`--andor-radius`, `4px`	picture corners
`--andor-goal-offer-image-background`	`--andor-color-border`, 6% ink	empty picture
`--andor-goal-offer-title-color`	`inherit`	product name
`--andor-goal-offer-price-color`	`inherit`	price
`--andor-goal-offer-price-font-weight`	`inherit`	price weight
`--andor-goal-offer-button-padding`	`0.4em 0.75em`	button padding
`--andor-goal-offer-button-border-color`	the goal accent	button border
`--andor-goal-offer-button-radius`	`--andor-radius`, `4px`	button corners
`--andor-goal-offer-button-background`	the goal accent	button fill
`--andor-goal-offer-button-color`	`--andor-color-on-accent`, `#fff`	button text
`--andor-goal-offer-button-font-weight`	`inherit`	button weight

Caution The title always takes two lines, so every card has the same height. Set the size with --andor-goal-offer-font-size, not on the title itself.

Examples

An outline button instead of a filled one:

andor-goal {
  --andor-goal-offer-button-background: transparent;
  --andor-goal-offer-button-color: var(--andor-color-accent, #c0392b);
}

CSS

Dawn:

andor-goal {
  --andor-goal-offer-button-background: rgb(var(--color-button));
  --andor-goal-offer-button-border-color: rgb(var(--color-button));
  --andor-goal-offer-button-color: rgb(var(--color-button-text));
  --andor-goal-offer-button-radius: var(--buttons-radius, 0);
  --andor-goal-offer-image-radius: var(--product-card-corner-radius, 0);
}

assets/base.css

Horizon:

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