# Customise the look of Endless Aisle

> Match Endless Aisle to your brand with theme colours, fonts, logos, shapes, and product labels, without writing any code.

Most of the kiosk's look comes from the **Theme**, **Fonts**, and **Layout** settings. For finer changes to single elements, see [Customise Endless Aisle with CSS](https://learn.phygrid.com/endless-aisle/customization/customize-endless-aisle-with-css/).

## How to set the theme colours

1. Expand **Theme** and choose a **Theme style**: **LIGHT** for dark text on light backgrounds, or **DARK** for the opposite
2. Under **Colors**, set your brand colours. The most visible ones are:
   - **Primary:** the header bar, main buttons, and highlights
   - **Secondary:** secondary buttons
   - **Main Screen Background Color:** the page background
   - **Secondary Screen Background Color:** pop-up windows and panels
   - **Dark:** the main text colour
   - **Light:** light text and backgrounds, and text on primary buttons
   - **Promo:** promotional prices
   - **Danger:** errors and out-of-stock messages
3. Optionally, set **Success**, **Border**, **Ominibar and Keyboard Background Color**, **Background for variant selector**, and **Redirect icon indicator color**
4. Click **Save all changes**

## How to set the fonts

1. Expand **Fonts**
2. Upload font files for **Light**, **Regular**, and **Bold**, in WOFF2, TTF, or OTF format. All three are required to save the settings. WOFF files upload to Media but can't be selected
3. Click **Save all changes**

Your font is used for all text on the kiosk.

## How to choose shapes

1. **Theme** → **Buttons border type:** rounded or straight corners for buttons, product cards, and pop-up windows
2. **Layout** → **Omnibar Layout type:** rounded or straight bar at the bottom of the screen
3. **Active** → **Details** → **Color picker border type:** round or square colour swatches on the product page
4. **Theme** → **Shadows:** the **Small**, **Medium**, and **Large** shadows used on tiles and pop-up windows, as CSS shadow values

## How to style product labels

Product labels from your catalogue, such as "New" or "Sale", are shown as stickers on product cards.

1. Expand **Layout** → **Sticker Properties**
2. Choose a **Border Type**: **ROUNDED** or **STRAIGHT** corners
3. Under **Custom style on sticker value**, add a **Sticker value**, such as "Sale", with its **Background color** and **Text color**
4. Choose the **Sticker Display Type** for the product page: as text above the name, or as a sticker next to the price
5. Click **Save all changes**

## What you can change and what you can't

You can change:

- Colours, fonts, logos, shapes, and shadows, as described above
- The layout of the home screen, product list, and product page, from the choices in **Layout** and **Active** → **Details**
- Images and videos on the idle screen, banners, and categories
- The texts in settings with language tabs, such as banner titles, button labels on the idle screen, and checkout titles
- Single elements with CSS, in the fields described in [Customise Endless Aisle with CSS](https://learn.phygrid.com/endless-aisle/customization/customize-endless-aisle-with-css/). This includes the size of banner and category tiles and how many fit in a row, see [How to change the layout of tiles](https://learn.phygrid.com/endless-aisle/customization/customize-endless-aisle-with-css/#how-to-change-the-layout-of-tiles)

You can't change:

- The kiosk's own texts, such as "Order Summary" or error messages. They come with the app in seven languages
- The order of the screens and what each screen contains, for example banners above categories on the home screen
- Pages through custom code or JavaScript