> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.azeoo.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Visual customization of your application (Theming) The **Theming** feature allows you to modify in real time the visual appearance of your application directly from your BackOffice. You can easily manage : * Photos and images displayed, * Colors, * The order of the blocks on your screens, * The steps of the sign-up process, * The actions of the navigation bar, * And many other visual/functional elements. 👉 This option is only available with the [Customized](https://azeoo.com/en/pricing) subscription. ## Why use Theming? **Theming** is designed to let you customize your application in real time, directly from your BackOffice. In practice, you have control over: * **Colors**: adapt them to your brand guidelines so your clients instantly recognize your identity. * **Photos and images displayed**: replace your visuals (banners, tiles, thumbnails) to match your brand and current offers (e.g. back-to-school challenge, bootcamp). * **The order of the blocks on your home screen**: reorganize them via drag & drop to highlight your priorities (e.g. “Programs” before “Nutrition” if that’s your core offering). * **The steps of the sign-up process**: adjust the onboarding experience (visuals, intro texts, displayed steps) to clearly guide new users. * **The actions of the navigation bar**: choose the number of tabs (3 to 5), their icons, names, and order for a simple and logical navigation based on your needs. * **And other elements**: hide/show certain blocks, edit catchphrases, promotional banners, “More” tab… depending on your configuration, to keep your app clear and efficient. ## What are the benefits for you, as a coach? * **Stand out**: assert your positioning with a clear visual identity and highlight your uniqueness (method, niche, values) right from the start. * **Strengthen your brand**: your application reflects your identity, values, and style. * **Simplify the client experience**: your clients quickly access what really matters to them. * **Highlight your news**: add a special banner for a back-to-school challenge, a promotion, or a bootcamp. * **Bring your app to life**: regularly updated visuals show that your coaching is dynamic and evolves with your clients. ## How to access it? 1. Log in to your BackOffice. 2. Click on **Customization** (menu at the bottom left). [![](https://storage.crisp.chat/users/helpdesk/website/-/3/e/4/7/3e478530d74c9c00/8cbc004d-4559-4776-b424-eab9e3_1xkbwv7.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754261390/227466252a342a860814e6502089/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-25%2Ba-CC-80%2B14_41_01.png?expires=1769163300&signature=23d7bcc7a30a313e2d6b846d335dfd87d1ebcf2e4413cd15f876c9d1043bc52d&req=dSciEst4nIJWWfMW1HO4ze66lbSJN2uQoW8Rof4IOWpdlcQnrSg%2B272h4IJG%0AQZ%2B8FFhOc4jlhI4wPfA%3D%0A) You will find 4 main customization categories: * **Screens**: visuals and layout of each screen of the app. * **Theme**: main colors, overall look & feel. * **Navigation**: theme colors, order and organization of the tabs. * **Settings**: additional options related to functionalities. ## Screens customization In the **Screens** section, you can modify each screen of the application. The screens are divided into several sub-categories: * **Login / Sign-up**: these are the account creation screens. You can customize visuals and the welcome text. * **General**: this section includes the home screen, shortcuts, and the “More” tab. You can manage images, blocks, and their order. * **Coaching**: covers everything related to training. * **Marketing & Engagement**: screens related to marketing as well as the app’s social media features. * **Premium**: everything related to subscriptions you can create. [![](https://storage.crisp.chat/users/helpdesk/website/-/2/5/c/d/25cd91e2b82b4200/28d4e777-a97a-4a1b-8e87-b563aa_vro4im.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754263742/837df0793ff8e070c38f7cd4f981/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-25%2Ba-CC-80%2B14_43_54.png?expires=1769163300&signature=d6862a4513703add061b2659071e3f49780649b47aee3ce5ae336ff30ffca24d&req=dSciEst4noZbW%2FMW1HO4zeO5jK9lMPTF5A7QkUTp1Mb45wMui7Q22kkly38n%0AXguBk1LQ0%2F8tlPIZlno%3D%0A) To customize a screen: 1. Select the desired screen. 2. Click on **Customize**. ### The Home screen This is the most frequently used screen. You can: * Modify **images**, * Change the **order of blocks** using drag & drop, * **Hide** unnecessary blocks (uncheck the “enabled” button), * Check what a block corresponds to by clicking on **View**. Here is a screenshot attached showing what you will see : [![](https://storage.crisp.chat/users/helpdesk/website/-/e/f/5/5/ef55423f4720a800/9872d09f-a923-4681-804a-e47ffc_t0p352.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754266244/b3d75514ef04a04e68b1befce1a2/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-25%2Ba-CC-80%2B14_50_46.png?expires=1769163300&signature=98aadb7dc6bd7dd5f8de3d7f588ad362aa79d19edd363152f43536cb81a09166&req=dSciEst4m4NbXfMW1HO4zREJjaMq8bcTApz6PK1PYc7sGyJoymWLcBuxaMcd%0Ae4V79FsaDFcz0xFkRjY%3D%0A) ### The Secondary Home screen The Secondary Home screen offers the same blocks and options as the main screen (program lists, nutrition plans, sessions/videos, products/subscriptions, CTAs, etc.). Its purpose is to differentiate the display in another tab of the app. **Examples of use:** * A rich main home screen (all actions) * With a focused secondary home screen (a few CTAs + exercise list). * One main Home tab * With one “Training” tab focused on actions (start a session, follow a video). ### Onboarding screen This screen appears when your client signs up for the first time in the application. [![](https://storage.crisp.chat/users/helpdesk/website/-/5/8/1/9/581987ddf7afe400/45cd829e-c266-491e-95fb-bf0100_1c27ixh.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754273984/bf839e5fd7966d9f69febe66b50c/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_33_15.png?expires=1769163300&signature=ff73fd0c9b90a596aa0bb620f624f56f6db68f422b92947a81cdcf27e123ab37&req=dSciEst5nohXXfMW1HO4zWq67xm26XzhYqnMKQ7JAOFR5sQ4drtExRk7vzVB%0Aio%2FytGXBWD2CyMmzjIk%3D%0A) **What you can do:** * Choose the questions asked at sign-up. * Edit the wording of these questions. * Define whether a question is mandatory or optional. **Note:** Some questions are always mandatory and non-editable: gender and date of birth. For all others, you can enable/disable the question and rewrite its text. ## Theme customization The **Theme** section allows you to adjust the overall appearance of your application: main color and display mode (light/dark). All changes are previewed in real time in the BackOffice (right panel). **Main color** * Choose the main color of your app. In most cases, it matches the color of your logo to ensure a consistent visual identity. * If you don’t know the exact color code, use a tool such as a **Color Picker** (eyedropper): import your logo, retrieve the HEX code (e.g. #b0156d), and paste it into the dedicated field. * The preview instantly shows you how it looks (buttons, links, active elements). [![](https://storage.crisp.chat/users/helpdesk/website/-/b/f/9/9/bf99d54611470800/5b63cf71-d87e-425e-b819-2e52f2_1uv7yrb.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754276231/11aa9b2d0e485946885cf83d380c/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B09_42_08.png?expires=1769163300&signature=091f37a8045f662a88ee4075c79f66155c0ca881140222c0d554bd555013fa33&req=dSciEst5m4NcWPMW1HO4zWDpOPArlBKb7kCIFosF8IilO%2FmgtBF81efAxiOi%0AXRn2kCy%2FCtbBmU9B30M%3D%0A) **Display mode (light / dark / default)** * **Light mode**: forces a light theme for all your users. * **Dark mode**: forces a dark theme for all your users. * **Default mode**: follows the user’s device preference (if their phone is in dark mode, the app displays in dark mode, etc.). 👉 Even if you force a mode (light or dark), the user can still switch to the other mode from the app’s **Settings** if they prefer. **Where to set colors by mode (light/dark)?** To customize different colors depending on the display mode, go to the **Navigation** category. ## Navigation customization The **Navigation** section allows you to adjust the appearance and structure of the app’s navigation bar. You can both manage the colors (with more detailed settings than in **Theme**) and configure the tabs (icons, labels, order). **Navigation colors (light / dark)** * You can define specific colors for light mode and dark mode (e.g. navigation bar background, icons/text for active and inactive tabs). * If you prefer to stay aligned with the **Theme** settings, simply uncheck the box dedicated to navigation color customization: the app will then automatically use the colors defined in **Theme**. * A live preview is displayed in the BackOffice (right panel) so you can check the result. **Navigation bar (tabs)** You can customize: * The number of tabs (from 3 to 5), * The icon of each tab, * The name (label) of each tab, * The display order (via drag & drop). **Important:** the **Home screen** tab is mandatory and must remain in the navigation bar. [![](https://storage.crisp.chat/users/helpdesk/website/-/f/9/f/6/f9f63eb8a36e78/3482f97e-fbc2-4932-8d83-0e7b5a_1ejaz4v.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754279676/28c68ae7a64197f07f5d0c207376/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B15_22_36.png?expires=1769163300&signature=2b3c05e66933b5e7cfe7b335f3024ca2ae01f1e1349cd6e67f65120ed4bba505&req=dSciEst5lIdYX%2FMW1HO4zVG6GCJNNlDloKCmjxR4C8g0Nl1zi2nlb%2Bsu3EdT%0A7JO%2BFZkVo3NkKcXnPDY%3D%0A) ### “Shortcuts” tab This screen groups together direct access to your key features. You can fully customize it. First, add the **Shortcuts** tab to your navigation bar. You will then have the option to click on **“Go to configuration”**, as shown in the screen below. [![](https://storage.crisp.chat/users/helpdesk/website/-/4/0/d/1/40d121f9e8be6c00/584e4c66-2f03-444b-a398-d15580_prm22c.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754280941/ebf399431103e143f9e1ca91d25e/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B16_50_01.png?expires=1769163300&signature=a21cd1cc05b6ac94bdb9b6cb916a624123787a1907d41c25c8280eeff165f62d&req=dSciEst2nYhbWPMW1HO4zZF%2FJcwoDrgXUfosDpcKhOjPJM7wkuxF9SmXRbUd%0APD49pPV2aZZLGwxAn%2FQ%3D%0A) You will then access the screen below : [![](https://downloads.intercomcdn.com/i/o/emgoxqda/1754281362/6180634ce8fb3805318c893fb0fc/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_52_59.png?expires=1769163300&signature=63af81b14927d279a87537e79341d50b78234e8c6262f334575f96f34c5cb966&req=dSciEst2nIJZW%2FMW1HO4zZnVZlDP1CluITv1q6K%2Bbf8vafjRVV46R16SvUlM%0AxsMMOK0JWr9xybDYtOM%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754281362/6180634ce8fb3805318c893fb0fc/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_52_59.png?expires=1769163300&signature=63af81b14927d279a87537e79341d50b78234e8c6262f334575f96f34c5cb966&req=dSciEst2nIJZW%2FMW1HO4zZnVZlDP1CluITv1q6K%2Bbf8vafjRVV46R16SvUlM%0AxsMMOK0JWr9xybDYtOM%3D%0A) **What you can do:** * Choose the icon, name, and action of each shortcut. * Reorder shortcuts via drag & drop and show/hide the ones you want. * Redirect a shortcut to any section of the app (actions available in the navigation bar). * Redirect also to an external link (website, e-shop, form, etc.). ### “More” screen To configure this screen, the process is the same as for the Shortcuts tab: first add this section to the navigation bar, then click on **“Go to configuration.”** This screen groups together shortcuts to the main features of the application. You can fully customize it (see below). [![](https://downloads.intercomcdn.com/i/o/emgoxqda/1754282556/092caa898edac084d98fc134be27/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_43_48.png?expires=1769163300&signature=4e92133f2cc2a9bed893f209c1de5461fef379d6b72ef21d8555854bb0ea3242&req=dSciEst2n4RaX%2FMW1HO4zSVnsQs4%2BVCMDfodekTnI208wf%2BT%2FOC6%2B6%2FM0ODr%0AyM3sN1Z2P39B0DlXzBY%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754282556/092caa898edac084d98fc134be27/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_43_48.png?expires=1769163300&signature=4e92133f2cc2a9bed893f209c1de5461fef379d6b72ef21d8555854bb0ea3242&req=dSciEst2n4RaX%2FMW1HO4zSVnsQs4%2BVCMDfodekTnI208wf%2BT%2FOC6%2B6%2FM0ODr%0AyM3sN1Z2P39B0DlXzBY%3D%0A) **What you can do:** * Create categories (e.g. Tracking, Coaching, Profile) to organize actions. * Add actions pointing to any section of the app (e.g. Data → Body & Stats so your clients can update their measurements). * Rename labels and reorder categories and actions via drag & drop. ## Save and synchronize Not all modifications require synchronization: only some need to be pushed to the app to become visible. * **Save**: your changes are stored in the BackOffice but are not yet visible in the app. You can continue editing other elements. * **Save & synchronize**: your changes are applied directly in the app. Here is the screen you will see appear : [![](https://downloads.intercomcdn.com/i/o/emgoxqda/1754286035/290387281adb9a33a0fca236fbe8/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-25-2Ba-CC-80-2B14_55_37.png?expires=1769163300&signature=f03c750213a65242e7eb3096dda4f820bc2d37a9717985cb231167372ffc22d5&req=dSciEst2m4FcXPMW1HO4zVlsZmIHBhT5UQaHAFJPwLnfmIzMPFqWYaKA%2FQaM%0AldTNKqBFUwwV2v4wTAg%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754286035/290387281adb9a33a0fca236fbe8/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-25-2Ba-CC-80-2B14_55_37.png?expires=1769163300&signature=f03c750213a65242e7eb3096dda4f820bc2d37a9717985cb231167372ffc22d5&req=dSciEst2m4FcXPMW1HO4zVlsZmIHBhT5UQaHAFJPwLnfmIzMPFqWYaKA%2FQaM%0AldTNKqBFUwwV2v4wTAg%3D%0A) When you select **“Save & synchronize”**, two options are available: * **Synchronize only for you** → allows you to test your changes in preview mode when logging in, without your clients seeing them. * **Synchronize for all your users** → your clients immediately see the changes in their application. * **Force update** → make sure to check the small box that forces the application update. If you don’t, your clients won’t see the modified elements; to view the update, they would have to restart the app. Once you’ve made your choice, click on **Synchronize** to finalize the action. [![](https://downloads.intercomcdn.com/i/o/emgoxqda/1754286419/c22a6bcbb5c92a7b84340f62505e/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B16_24_37.png?expires=1769163300&signature=17cff7737fd563e2ca90955e8380beaa86da9ead20132ba7cc4afcabdfc5f8db&req=dSciEst2m4VeUPMW1HO4zc2nzlF4QOcazHe8eracDH8HDsYyqB5hA0ZdUJHI%0ALyEdXtUEmfUtj8Qfzl0%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1754286419/c22a6bcbb5c92a7b84340f62505e/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B16_24_37.png?expires=1769163300&signature=17cff7737fd563e2ca90955e8380beaa86da9ead20132ba7cc4afcabdfc5f8db&req=dSciEst2m4VeUPMW1HO4zc2nzlF4QOcazHe8eracDH8HDsYyqB5hA0ZdUJHI%0ALyEdXtUEmfUtj8Qfzl0%3D%0A)