# Goal suggestions styling

> Class names, states and CSS custom properties for the goal suggestions row inside the AndOr goal bar.

Source: https://backtrackhq.com/docs/widgets/goal-suggestions/styling/

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.
(Diagram: A goal bar with a row of three suggested products and Add buttons)
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](https://backtrackhq.com/docs/developers/tokens/#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](https://backtrackhq.com/docs/widgets/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:

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

Dawn:

<p class="docs-code-file">assets/base.css</p>

```css
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);
}
```

Horizon:

<p class="docs-code-file">assets/base.css</p>

```css
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);
}
```

> **Note:** Never force `.andor-goal__offer` visible. A row that is
> `hidden` has no suggestions for this cart.