# Lift & Learn settings explained

> Reference guide for all Lift & Learn settings: peripherals, products, standard and compare screens, theme, and advanced settings.

## Console settings

1. **Installation name:** The installation name shown in **Apps** → **Installations**
2. **Add to group:** The [installation group](https://learn.phygrid.com/glossary/#installation-group) it belongs to in **Apps** → **Installations**
3. **Multi-language support:** The languages you can write texts in, such as omnibar, promo, and QR code texts. Product texts are shown in the default language. For the app's own texts (omnibar, promo and QR code texts) the screen shows the first language entered, not the default language (see [Glossary](https://learn.phygrid.com/glossary/#multi-language-support))

## App settings

> **Warning:** Changing the app version can add or remove certain options related to the specific version.

1. **Version:** The app version used by your installation

## Peripherals

1. **Nexmo Sensor:** The Nexmosphere sensor connected to the device. The list shows sensors reported by the Nexmosphere peripheral [edge app](https://learn.phygrid.com/glossary/#edge-app). See [Install and configure Nexmosphere peripheral](https://learn.phygrid.com/lift-and-learn/install-and-configure-nexmosphere-peripheral/)

## General

1. **Company Logo** → **Logo Image:** The logo shown on the product details screens (PNG, JPEG, or SVG). Style it with the `.company-logo` class in **Advanced Settings** → **Custom CSS**
2. **Company Logo** → **Custom CSS:** Not used by the current app version

## Products

1. **Product List** → **Add:** Adds a product to the list
2. **Product:** The product from your catalogue. Its `NEXMO-{number}` EAN links it to the sticker on the shelf. See [Integrate your product catalogue for Lift & Learn](https://learn.phygrid.com/lift-and-learn/integrate-your-product-catalog-for-lift-and-learn/)
3. **Background Media:** Image or video shown behind this product's details (PNG, JPEG, SVG, MP4, or WebM)
4. **Custom CSS:** CSS applied to this product's details screen, for example to `.product-info-background`

## Screens

1. **Mode:** How the screen reacts when products are lifted
   - **Standard** (default): Shows one product at a time
   - **Compare:** Lifting two products at the same time shows them side by side

Each mode has its own **Idle Screen**, **Wakeup Screen**, and **Product Details** settings. Only the settings of the selected mode are used.

### Standard mode: Idle screen

1. **Background** → **Media File:** Image or video shown while no product is lifted
2. **Background** → **Custom CSS:** CSS for the idle screen, for example `.idle-container` and `.idle-media`

### Standard mode: Idle omnibar

1. **Show Omnibar:** Shows the call-to-action bar on the idle screen. Default: on
2. **CTA Icon:** Icon shown in the bar. If empty, a built-in icon is used
3. **CTA Header Text:** Headline in the bar
4. **CTA Subheader Text:** Secondary text in the bar
5. **Custom CSS:** CSS for the bar, for example `.omnibar-container`, `.cta-icon`, `.cta-header-text`, and `.cta-subheader-text`

### Standard mode: Wakeup screen

1. **Content** → **Active** and **Custom CSS:** Not used by the current app version. The screen doesn't react to motion

### Standard mode: Product details

1. **Show Omnibar:** Shows the bar on the product details screen. Default: on
2. **Background** → **Custom CSS:** CSS for the product details background
3. **Product Info** → **Custom CSS:** CSS for the product texts, for example `.product-brand`, `.product-title`, and `.product-description`
4. **Image Gallery** → **Show Thumbnails:** Shows thumbnails next to the main image instead of dots. With thumbnails on, the gallery doesn't play automatically. Default: off
5. **Image Gallery** → **Custom CSS:** CSS for the gallery, for example `.gallery-container`, `.gallery-carousel`, `.gallery-thumbnails`, and `.gallery-dots`
6. **Promo** → **Promo Text:** Promotional text shown in the price area
7. **Promo** → **Show Product Label:** Shows the product label in the price area. Default: off
8. **Promo** → **Custom CSS:** CSS for the price area, for example `.price-container`, `.retail-price`, `.slashed-price`, `.promo-custom-text`, and `.promo-product-label`
9. **Selling Points** → **Custom CSS:** CSS for the key selling points, for example `.selling-point-details`
10. **QR Code** → **Show QR Code:** Shows a QR code on the product details screen. Default: on
11. **QR Code** → **QR Code Background:** Image shown behind the QR code
12. **QR Code** → **QR Code URL Override:** The address the QR code opens. If empty, the QR code opens the product's own link
13. **QR Code** → **CTA Header Text** and **CTA Subheader Text:** Texts shown next to the QR code
14. **QR Code** → **Custom CSS:** CSS for the QR code area, for example `.qr-media-background`, `.qr-code`, `.qr-cta-header-text`, and `.qr-cta-subheader-text`

### Compare mode: Idle screen

1. **Background** → **Media File:** Image or video shown while no product is lifted
2. **Background** → **Custom CSS:** CSS for the idle screen, for example `.idle-container` and `.idle-media`

### Compare mode: Idle omnibar

1. **Show Omnibar:** Shows the call-to-action bar on the idle screen. Default: on
2. **Left Header Text** and **Left Subheader Text:** Texts for the left side of the bar
3. **Right Header Text** and **Right Subheader Text:** Texts for the right side of the bar
4. **Custom CSS:** CSS for the bar, for example `.omnibar-container`, `.cta-left-header-text`, `.cta-left-subheader-text`, `.cta-right-header-text`, and `.cta-right-subheader-text`

### Compare mode: Wakeup screen and product details

Compare mode has its own **Wakeup Screen** and **Product Details** settings, with the same fields as in standard mode. Set them under **Compare Mode**: the standard mode settings don't apply when **Mode** is **Compare**.

## Theme

### Colours

Each colour pair has a **Main Color** (default #000000) and a **Contrast Color** (default #ffffff) for text and icons shown on top of the main colour.

1. **Default Colors:** The base pair used across the app
2. **Primary Colors:** The accent pair
3. **Secondary Colors:** The secondary accent pair

### Fonts

> **Note:** If a font weight is left empty, the built-in font for that weight is used.

1. **Sans-serif Font** → **Light**, **Regular**, **Bold**, **Bolder:** Font files (OTF, TTF, WOFF, or WOFF2) for each weight of the main font
2. **Serif Font** → **Light**, **Regular**, **Bold**, **Bolder:** Font files for each weight of the serif font

## Advanced settings

1. **Idle Timeout** → **Enabled:** Returns to the idle screen after the timeout, even if a product is not put back. Default: on
2. **Idle Timeout** → **Timeout (ms):** Time in milliseconds before the screen returns to idle. Default: 30000 (30 seconds)
3. **Idle Timeout** → **Show Countdown:** Shows a countdown to the return to idle. Default: off
4. **Lift Debounce (ms):** Time in milliseconds the app waits after a lift before showing the product, so the screen settles on the last lifted product instead of switching every time a product is moved. Default: 500
5. **Gallery Auto-play Speed (ms):** Time in milliseconds each image is shown before the gallery moves on. Default: 3000
6. **Motion Detection:** **Debug Mode**, **Scale Factor**, **Min Neighbors**, **Flags**, **Min Size**, and **Max Size** are not used by the current app version
7. **Custom CSS:** CSS applied to the whole app, for example to style the `.company-logo`

## Save options

1. **Auto Deploy:** If selected, changes are saved, and a [build](https://learn.phygrid.com/glossary/#build) is created and deployed to connected devices (see [Glossary](https://learn.phygrid.com/glossary/#auto-deploy))
2. **Environment:** The deployment [environment](https://learn.phygrid.com/glossary/#environment)
3. **Save all changes:** Saves your current configuration