# App embed

> The settings of the AndOr Discount Display app embed, like the shared colors, corner radius, style preset and custom CSS.

Source: https://backtrackhq.com/docs/widgets/app-embed/

The **AndOr Discount Display** app embed holds the settings AndOr
widgets share. Blocks show without it, but some parts of AndOr need it.

## What works without the app embed

| Works without the app embed | Needs the app embed |
| --- | --- |
| Every AndOr block you add in the theme editor on the product page, cart page or a section: sale price, savings badge, countdown, volume tiers, bundle card, Buy X get Y, free gift slot and its line on the product page, goal bar, goal suggestions, current offers, discount callout and collection banner.<br><br>These blocks use the default colors and default text. | • One-line tags, on product cards and other places without a block.<br>• Anything in the cart drawer: the gift slot, claim rows and the drawer goal bar.<br>• Your brand color.<br>• Your Storefront text changes and translations. |

We recommend turning it on. It takes one click. It adds the cart
drawer parts, your brand color and your text changes. See
[Turn on the app embed](https://backtrackhq.com/docs/get-started/install/#turn-on-the-app-embed).

> **Tip:** The app embed works on every theme. Older vintage themes have
> no app blocks, so their widgets come from one-line tags. See
> [Vintage themes](https://backtrackhq.com/docs/themes/vintage/). The cart drawer parts also
> need a theme that sends Shopify's storefront cart events. See [Theme requirements](https://backtrackhq.com/docs/get-started/theme-requirements/).

## Open the embed settings

In Shopify, go to **Online Store** > **Themes**, click
**Edit theme**, open **App embeds**, then click **AndOr Discount
Display**.

## Settings

(Screenshot: The AndOr Discount Display settings in the theme editor)

### Sale price color

The color of the sale price. Some other widgets use it as their main
accent color too, unless their block has its own color set. Left on the
default, it follows your [brand color](https://backtrackhq.com/docs/promotions/brand-color/)
from the app.

Default: `#c0392b`.

### Original price color

The color of the crossed-out original price.

Default: `#6d7175`.

### Corner radius

Rounds every AndOr surface, such as badges and buttons. `0` gives
square corners.

Options: 0 to 24 px. Default: 4 px.

### Style preset

A ready-made look for every AndOr widget. Your colors and custom CSS
still apply on top. A preset's corner rounding wins over **Corner
radius**.

Options: Classic, Soft, Bold, Minimal, Dark. Default: Classic.

- **Classic:** the standard look.
- **Soft:** rounder corners and softer borders.
- **Bold:** nearly square corners, dark text and strong borders.
- **Minimal:** square corners and no tinted backgrounds.
- **Dark:** light text and dark backgrounds, for dark themes.

### Custom CSS

CSS that applies to all AndOr widgets. It is added after AndOr's own
style settings, so a `:root` rule here can restyle every widget at
once. Example:

```css
:root {
  --andor-color-accent: #0b6b4f;
  --andor-radius: 8px;
}
```

For the full list of names you can set, see
[Styling tokens](https://backtrackhq.com/docs/developers/tokens/).

### Show reward icons on goal bars

Shows the small reward icons (like a truck for free shipping) on every
**Order goal** bar. Turn it off to hide them on all goal bars, pasted
and cart drawer bars included.

Default: on.

### Log AndOr display decisions to the browser console

Writes notes about what each widget decided into the browser console.
Turn it on only while you fix a problem. Leave it off on a live store.

Default: off.

> **Note:** Theme editor setting names are in English only. Shoppers see
> widget text in their store language.

## Where the brand color fits

Your brand color is not an embed setting. You pick it in AndOr, on the
**Create promotion** gallery, under **Brand color**. The embed uses it
while **Sale price color** stays on its default. A color you change in
the embed wins over the brand color. A color you change on a block wins
over both.