# Customize your mobile App

The **Customize your mobile App** feature allows business owners to get a real-time visual prototype of how the Suggestic app will look by using new features, components, and their own branding.

## Access the customize your mobile app option

To access the Customize your mobile app option, go to the home page and click on the **Start** button:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2F4xxZ3QbyvIQVpmZFrP4B%2Fimage.png?alt=media\&token=8d250010-ad95-4c71-80b2-1d0ec7dc74f4)

The following options are displayed:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FsndKXyXIZAqr1zlkMjKp%2Fimage.png?alt=media\&token=5934363c-9e23-4645-9363-d03258aea078)

### Characteristics

* Upload your logo. Upload PNG images of no more than 100k.
* An app viewer will display automatically the user's selection (logo, colors, modules)
* If the user selects more than two modules, the app viewer will display a carousel to visualize the selected modules.

Start creating your prototype by following the steps below

## Customize your brand's image

### Upload your logo

Upload a background logo of no more than 100kb. Click on the + sign, and choose an image from your device:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FjJ9YL51ceQLnhiDJHcKb%2Fimage.png?alt=media\&token=b85ea81e-0756-4aba-ba68-6c669d65128e)

The app viewer visualizes the uploaded logo:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FAlSCqdderI6662pzokAq%2FCMALogo.gif?alt=media\&token=55c7097e-e587-4b5c-9132-e2715e4bdb9b)

### Background gradients

Choose the background gradients to display smooth transitions between two or more specified colors. Pick the colors by using either one of the following 3 codes:

* **RGB** (red, green, blue) notation
* **HSL** (hue, saturation, lightness) values
* **HEX** (hexadecimal) values.

Check the example below:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FpNYYKY7VppcLZKIJvAs5%2FCMABackgroundC.gif?alt=media\&token=b7a94b1d-d3bc-423c-859f-afe333a2b1fa)

### Primary and Secondary Color

Use the primary color to highlight the titles of the modules and the secondary color to change the icons' colors. 

Pick the colors by using either one of the following 3 codes:

* **RGB** (red, green, blue) notation
* **HSL** (hue, saturation, lightness) values
* **HEX** (hexadecimal) values.

See the example below:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FnmkAyiriILkFH8P0AdX8%2FCMAPrimSecC.gif?alt=media\&token=c44a2ead-0a7d-4771-89cc-ae41b31615bb)

## Select your desired features

Add one or more of the following modules to your app experience:

| Meal Planner     | Recipe Finder | Restaurants         |
| ---------------- | ------------- | ------------------- |
| Progress Tracker | Food Logging  | Weight Goals        |
| Subscriptions    | Notifications | Appointments        |
| Grocery List     | Chat          | Video Calls         |
| Programs         | Lab tests     | Nutrition Dashboard |
| Preferences      | Onboarding    |                     |

*When* a *user* places the *cursor over* one of the modules, the app viewer will display it. Mark the checkbox to keep the module selected:

![](https://3642424792-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbNfvAh4JOurMsovv7p%2Fuploads%2FWO0VtQcl2pLTre1I6otC%2FCMAFeatures.gif?alt=media\&token=ecb3e828-a9ca-47a3-a6a6-0e68c57d2394)