> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/brand-consumer-app.md).

# Brand a Consumer App

This page describes how to adjust the appearance of the Consumer App to match your e-commerce web store experience.

[Consumer Apps](/haut.ai/haut.ai-features/consumer-apps.md) is a feature of the Haut.AI SaaS Platform, offering a no-code widget for skin analysis and recommendations.

To set up a minimal branding for the Consumer App, you need:

1. Add your logo, see [#setting-your-logo-for-the-starting-screen](#setting-your-logo-for-the-starting-screen "mention").
2. Set your color theme, see [#setting-your-colors-for-app](#setting-your-colors-for-app "mention").
3. Set your images for the welcome screen, see [#setting-your-image-for-the-starting-screen](#setting-your-image-for-the-starting-screen "mention").
4. Select the language or leave the auto-translation feature "on", see [#selecting-the-app-language](#selecting-the-app-language "mention").

***

## Setting the logo for the starting screen

In the previous step [Create a Consumer App](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/create-consumer-app.md) you already created and tested the Consumer App with the default appearance.

This step describes how to change the logo on top of the starting screen.

1. Navigate to the [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) tab on the menu of SaaS platform
2. Navigate to your Consumer App details by clicking on name of your app in the list of apps.
3. Open the `General` settings tab.
4. Scroll down to `Color theme` section.
5. Upload your logo. Follow the guidelines for file size and type for better results.
6. Click on "Save changes" button on the bottom right corner of the screen.

***

## Setting the colors for app

This step describes how to adjust the colours of key elements of your Consumer App.

1. Navigate to [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) tab on the menu of SaaS platform.
2. Navigate to your Consumer App details by clicking on name of your app in the list of apps.
3. Open the `General settings` tab.
4. Scroll down to `Color theme` section.
5. Adjust the colors to match your website style by selecting your `Brand color` and `Background color`.
6. Click on `Save changes` button on the bottom right corner of the screen.

***

## Setting the image for the starting screen

This step describes how to replace the default starting screen image with your custom image. This action allows to show different images on desktop and smartphone devices.

1. Navigate to the [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) tab on the menu of the SaaS platform.
2. Navigate to your Consumer App details by clicking on the name of your app in the list of apps.
3. Open the `General settings` tab.
4. Scroll down to the `Main image` section.
5. Upload your image for the starting screen for mobile devices. Follow the guidelines for file size and type for better results.
6. Upload your image for the starting screen for desktop/tablet devices. Follow the guidelines for file size and type for better results.
7. Click on the `Save changes` button on the bottom right corner of the screen.

***

## Selecting the app language

By default, the Consumer App uses the language of the user device operation system (OS) to display the interface. If the language is not supported, the Consumer App interface is displayed in English.

You can redefine this option by limiting the display of the Consumer App to only 1 language. To do this:

1. Navigate to the [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) tab on the menu of the SaaS platform.
2. Navigate to your Consumer App details by clicking on the name of your app in the list of apps.
3. Open the `Advanced` tab.
4. Scroll down to the `Translation` section.
5. Select your desired language in the drop-down menu. Select `None` to keep the Consumer App default behavior of automatic language selection.
6. Click on the `Save changes` button on the bottom right corner of the screen.

### List of currently supported languages

* Arabic (`ar`)
* Chinese (`zh`)
* Czech (`cs`)
* Danish (`da`)
* Dutch (`nl`)
* English (`en`)
* Estonian (`et`)
* Finnish (`fi`)
* French (`fr`)
* German (`de`)
* Hebrew (`he`)
* Hungarian (`hu`)
* Italian (`it`)
* Japanese (`ja`)
* Lithuanian (`lt`)
* Mongolian (`mn`)
* Polish (`pl`)
* Portuguese (`pt`)
* Romanian (`ro`)
* Russian (`ru`)
* Slovak (`sk`)
* Spanish (`es`)
* Turkish (`tr`)
* Ukrainian (`uk`)

{% hint style="info" %}
New languages can be added and supported by the request of the client. Please contact your Account Manager if you have such request.
{% endhint %}

***

## FAQ

### Can I change the fonts in the Consumer App interface?

Unfortunately this option is currently not available.

***

{% hint style="warning" %}
Not a Haut.AI client yet?
{% endhint %}

<a href="https://haut.ai/book-a-demo?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button primary" data-icon="user-vneck">Book a demo</a> <a href="https://haut.ai/product/ai-skin-analysis?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button secondary" data-icon="external-link">Platform overview on haut.ai</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/brand-consumer-app.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.