> ## 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).

# Personnalisation visuelle de votre application (Theming)

La fonctionnalité **Theming** vous permet de modifier en temps réel l’aspect visuel de votre application depuis votre BackOffice. Vous pouvez gérer facilement :

* Les **photos** et **images** affichées,
* Les **couleurs**,
* L’**ordre des blocs** sur vos écrans,
* Les étapes de la **phase d'inscription**,
* Les actions de la **barre de navigation**,
* Et bien d’autres éléments visuels / fonctionnels.

👉 Cette option est disponible **uniquement** pour l'abonnement [Customized](https://azeoo.com/tarifs).

## Pourquoi utiliser le Theming ?

Le **Theming** est conçu pour vous permettre de personnaliser votre application en temps réel, directement depuis votre BackOffice. Concrètement, vous avez la main sur :

* **Les couleurs** : adaptez-les à votre charte graphique pour que vos clients reconnaissent immédiatement votre univers.
* **Les photos et images affichées** : remplacez vos visuels (bannières, tuiles, vignettes) pour coller à votre identité et à vos offres du moment (ex. challenge de rentrée, bootcamp).
* **L’ordre des blocs sur votre écran d'accueil** : réorganisez par glisser-déposer pour mettre en avant vos priorités (ex. “Programme” avant “Nutrition” si c’est votre cœur d’offre).
* **Les étapes de la phase d’inscription** : ajustez l’expérience d’accueil (visuels, textes d’introduction, étapes affichées) pour guider clairement le nouvel utilisateur.
* **Les actions de la barre de navigation** : choisissez le nombre d’onglets (3 à 5), leurs icônes, leurs noms et leur ordre pour une navigation simple et logique en fonction de vos besoins.
* **Et d’autres éléments** : masquage/affichage de certains blocs, textes d’accroche, bannières promotionnelles, onglet plus… selon votre configuration, pour garder une app claire et efficace.

## Quels avantages pour vous, coach sportif ?

* **Se démarquer :** affirmez votre positionnement avec une signature visuelle claire et mettez en avant vos spécificités (méthode, niche, valeurs) dès l’accueil.
* **Renforcer votre marque** : votre application reflète votre identité, vos valeurs et votre style.
* **Simplifier l’expérience client** : vos élèves accèdent rapidement à ce qui compte vraiment pour eux.
* **Mettre en avant vos actualités** : ajoutez une bannière spéciale pour un challenge de rentrée, une promo ou un bootcamp.
* **Dynamiser votre app** : des visuels régulièrement actualisés montrent que votre coaching est vivant et évolue avec eux.

## Comment y accéder ?

1. Connectez-vous à votre **BackOffice**.
2. Cliquez sur **Personnalisation** (menu en bas à gauche)

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/e/8/a2e841a04aa09000/131e8bce-46dd-4613-9161-39522f_i03hvl.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750325507/24c685b3e227073cff5102589dc4/Capture+d%E2%80%99e%CC%81cran+2025-09-25+a%CC%80+14_41_01.png?expires=1769162400&signature=81d2b642a80f8afdfe5190503555b40e2a37ba9b465ababe29c1bc1589d69cf4&req=dSciFsp8mIRfXvMW1HO4zRcYkxg8QKi9ie1tm59BqFmi1XsJQof6KBCkZ8y7%0AT1BCUffX4EsXw5BrYTY%3D%0A)

Vous trouverez 4 catégories principales de personnalisation :

* **Écrans** : visuels et organisation de chaque écran de l’app.
* **Thème** : couleurs principales, ambiance générale.
* **Navigation** : couleurs par thème, ordre et organisation des onglets.
* **Paramètres** : options complémentaires liées aux fonctionnalités.

## Personnalisation des écrans

Dans la section **Écrans**, vous pouvez modifier chaque écran de l’application.

Les écrans sont classés en plusieurs sous-catégories :

* **Connexion / Inscription** : Ce sont les écrans de création de compte. Vous pouvez y personnaliser les visuels et le texte d’accueil.

* **Général** : Cette section regroupe l’écran d'accueil, les raccourcis et le plus. Vous gérez les images, les blocs et leur ordre.

* **Coaching** : Elle couvre tout ce qui est lié à l'entraînement.

* **Marketing & Engagement** : Ce sont les écrans lié au marketing ainsi qu'aux réseaux social de l'application

* **Premium** : Vous trouverez ici tout ce qui concerne les abonnements que vous pouvez créer.

[![](https://storage.crisp.chat/users/helpdesk/website/-/2/9/4/9/2949d4f44e44b600/801ab7df-7a85-4ce6-8406-e352c2_15hsesx.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750328016/23aa1edccad1631c3f274d3d924e/Capture+d%E2%80%99e%CC%81cran+2025-09-25+a%CC%80+14_43_54.png?expires=1769162400&signature=66b7a8369c24674e992d3ee3db7a5d66321db2f963c54c19cead1753712a535c&req=dSciFsp8lYFeX%2FMW1HO4zd%2BZsGwBQBHr%2BrUuKiOnvo7UbWmMTDw%2BQ7HYkS4o%0Ar3z2ICtUs93XTYCslzQ%3D%0A)

Pour personnaliser un écran :

1. Sélectionnez l’écran souhaité.
2. Cliquez sur **Personnaliser**.

### L’écran d'accueil

C’est l’écran le plus utilisé. Vous pouvez :

* Modifier les **images**,
* Changer l’**ordre des blocs** grâce au **drag & drop**,
* Masquer des blocs inutiles (décochez le bouton “activé”),
* Vérifier à quoi correspond un bloc en cliquant sur **Voir**.

Voici une capture d'écran, ci-joint de ce que vous verrez :

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/8/e/f/a8ef6c7c7e690000/4b38b5a7-d7a8-45cf-8138-045c25_143yode.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750329174/717b2c7753b1a7eb62839098ddbc/Capture+d%E2%80%99e%CC%81cran+2025-09-25+a%CC%80+14_50_46.png?expires=1769162400&signature=35a895792f7402da90c6a8d9b61a41eb6c855f1bcc2c27a7a342000baceb44ac&req=dSciFsp8lIBYXfMW1HO4zd7NC9ZpX32e64wuXfxqpSvkUl0Ll2NAa8%2BSn497%0ANbkpjx1TTPqTSu8ApYk%3D%0A)

### L’écran d'accueil secondaire

L’**écran d’accueil secondaire** propose **les mêmes blocs et options** que l’écran principal (listes de programmes, plans nutritionnels, séances/vidéos, produits/abonnements, CTA, etc.).

Son objectif est de **différencier l’affichage** dans un **autre onglet** de l’app.

**Exemples d’usage :**

* Un **accueil principal** riche (toutes les actions)

* un **accueil secondaire** focalisé (quelques **CTA** + **liste d’exercices**).
* Un onglet **accueil principal**

* un onglet “**Training**” orienté action (démarrer une séance, suivre une vidéo).

### Écran d’onboarding

Cet écran s’affiche lorsque votre client s’inscrit pour la première fois dans l’application.

[![](https://storage.crisp.chat/users/helpdesk/website/-/e/2/f/0/e2f008f38f5a2800/75deb37e-6a50-4167-9888-58ba68_1glj38l.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750990121/040a90a1f5251c01ab34ee7a972a/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+16_33_15.png?expires=1769162400&signature=4b2673c4a2d61ae1cb75b3aa49433f50e6c90921b50d4cc632de05fd84a6b56e&req=dSciFsB3nYBdWPMW1HO4zY4%2BHWHGxy9Rtuxp%2FWWRzD9BSA%2BC45h4uCGhZJGs%0AWmyQg%2B08n6I7KU5z9ik%3D%0A)

**Ce que vous pouvez faire :**

* Choisir les **questions** posées à l’inscription.
* **Modifier le libellé** (formulation) de ces questions.
* Définir si une question est **obligatoire** ou **optionnelle**.

**À noter :**

* Certaines questions sont toujours **obligatoires** et non modifiables : **genre** et **date de naissance**.
* Pour les autres, vous pouvez **activer/désactiver** la question et **réécrire** son texte.

## Personnalisation du thème

La section **Thème** vous permet d’ajuster l’apparence globale de votre application : **couleur principale** et **mode d’affichage** (clair/sombre). Tous les changements sont **prévisualisés en direct** dans le BackOffice (panneau de droite).

**Couleur principale**

* Choisissez la **couleur principale** de votre app. Dans la majorité des cas, elle est identique à la couleur de votre **logo** pour garder une identité visuelle cohérente.
* Si vous ne connaissez pas le code couleur, utilisez un **outil** comme **“Color Picker”** (pipette) : importez votre logo, récupérez le **code HEX** (ex. #b0156d) et collez-le dans le champ prévu.
* La prévisualisation vous montre immédiatement le rendu (boutons, liens, éléments actifs).

[![](https://storage.crisp.chat/users/helpdesk/website/-/f/f/e/b/ffeb7af06ecde800/ef4fbb3e-4540-47bd-9ccb-44df31_1irlon3.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750336818/c3f6fb8990b187abe8cfb60a9e87/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+09_42_08.png?expires=1769162400&signature=aebeefa39732e4c48b12f1a8fc29d2fdba4ba1fdc7d8b0fd61f04925cc6ff086&req=dSciFsp9m4leUfMW1HO4zVFT9IetajV5y2pNjrRUNhemcgN3%2FJv7dJmioqJV%0ASM6xyPIbdns2XisJ5jw%3D%0A)

**Mode d’affichage (clair / sombre / par défaut)**

* **Mode clair** : impose un thème clair pour tous vos utilisateurs.
* **Mode sombre** : impose un thème sombre pour tous vos utilisateurs.
* **Mode par défaut** : respecte la **préférence de l’appareil de l’utilisateur** (si son téléphone est en sombre, l’app s’affiche en sombre, etc.).

👉 Même si vous imposez un mode (clair ou sombre), l’utilisateur peut **changer de mode** depuis les **Paramètres** de l’application s’il préfère l’autre affichage.

**Où régler les couleurs par mode (clair/sombre) ?**

Pour personnaliser des couleurs **différentes** selon le mode d'affichage, allez dans la catégorie « Navigation »

## Personnalisation de la navigation

La section **Navigation** vous permet d’ajuster l’apparence et la structure de la barre de navigation de l’application.  
Vous pouvez à la fois gérer les couleurs (avec des réglages plus fins que dans Thème) et configurer les onglets (icônes, libellés, ordre).

**Couleurs de la navigation (clair / sombre)**

* Vous pouvez définir des couleurs **spécifiques** pour le **mode clair** et pour le **mode sombre** (ex. fond de la barre, icônes/texte des onglets actifs et inactifs).
* Si vous souhaitez **rester aligné avec les réglages du Thème**, **décochez la case** dédiée à la personnalisation des couleurs de la navigation : l’app utilisera alors automatiquement les couleurs définies dans **Thème**.
* Une **prévisualisation en direct** s’affiche dans le BackOffice (panneau de droite) pour vérifier le rendu.

**Barre de navigation (onglets)**

Vous pouvez personnaliser :

* Le **nombre d’onglets** (de **3 à 5**),
* L’**icône** de chaque onglet,
* Le **nom** (libellé) de chaque onglet,
* L’**ordre** d’affichage (par **glisser-déposer**).

**Important :** l’onglet **Écran d'accueil** est **obligatoire** et doit rester présent dans la barre.

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/e/a/8/9ea8d02c67f35800/4727f7b2-f073-45ce-b4f2-4110c4_slnu2v.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1750846914/5542b5abbaaa60175116ba124c58/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B15_22_36.png?expires=1769162400&signature=059d7d682133a9f4aebef94402722b92b5f5f009200d16b9daccab67e53b9eb6&req=dSciFsF6m4heXfMW1HO4zVJgpd0rHPPy0NOGH7sfMQ1cKsU9AGpNjoiGIPYT%0A3Kpvms9ER3Z4svnb5c8%3D%0A)

### Onglet « Raccourcis »

Cet écran regroupe des accès directs vers vos fonctions clés. Vous pouvez le **personnaliser entièrement**.

Dans un premier temps ajouter dans votre barre de navigation les raccourcis, vous aurez ensuite la possibilité de cliquer sur "aller à la configuration". Comme sur l'écran ci-dessous.

[![](https://storage.crisp.chat/users/helpdesk/website/-/2/d/4/e/2d4e8932db448200/7b20a0ab-3cc5-4846-aa15-ddbbf1_1l4p2lo.png)](https://downloads.intercomcdn.com/i/o/emgoxqda/1751025846/ebbc42eedd8819abd531b891fb74/Capture-2Bd-E2-80-99e-CC-81cran-2B2025-09-29-2Ba-CC-80-2B16_50_01.png?expires=1769162400&signature=7193f90fa5bd6a1396337a42f6dc937006486e8e51bc8117a443d3b8bfa58e9b&req=dSciF8l8mIlbX%2FMW1HO4zWwc25neHpfvLUiYreaQdBTjH%2FAp7LnBIVN3LoG%2F%0AhkzHkWd3rqrK1DtyJR4%3D%0A)

Vous accédez ensuite à l'écran ci-dessous :

[![](https://downloads.intercomcdn.com/i/o/emgoxqda/1751031321/6fd370eef8057689e07b185c3cac/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+16_52_59.png?expires=1769162400&signature=bf21a3dac1c4b0fddb74a2072b3fefb141de9a6634339a1c5e54488d0aad8348&req=dSciF8l9nIJdWPMW1HO4zY9096N6A6rrT0u0O141UVJfkQg6dJxMkmfiyROJ%0Ao5u%2BobjgQrmUeC0sLK4%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1751031321/6fd370eef8057689e07b185c3cac/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+16_52_59.png?expires=1769162400&signature=bf21a3dac1c4b0fddb74a2072b3fefb141de9a6634339a1c5e54488d0aad8348&req=dSciF8l9nIJdWPMW1HO4zY9096N6A6rrT0u0O141UVJfkQg6dJxMkmfiyROJ%0Ao5u%2BobjgQrmUeC0sLK4%3D%0A)

**Ce que vous pouvez faire :**

* Choisir l’**icône**, le **nom** et l’**action** de chaque raccourci.
* **Réordonner** les raccourcis par **glisser-déposer** et **afficher/masquer** ceux que vous voulez.
* Rediriger un raccourci vers **n’importe quelle section de l’app** (actions disponibles dans la barre de navigation).
* Rediriger aussi vers un **lien externe** (site web, e-shop, formulaire, etc.)

### Écran « Plus»

Pour configurer cet écran, c'est exactement comme l'onglet raccourci, il faut d'abord rajouter cette section dans la barre de navigation, puis cliquer sur aller à la configuration

Cet écran regroupe des raccourcis vers les principales fonctionnalités de l’application. Vous pouvez le **personnaliser entièrement**. (Voir ci-dessous)

[![](https://downloads.intercomcdn.com/i/o/emgoxqda/1751011385/34980907314f4bcd454349e08147/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+16_43_48.png?expires=1769162400&signature=fb849fae0ace55ececbce11db3e1591c4c10f0c483a0953a118bb9170ea2e61a&req=dSciF8l%2FnIJXXPMW1HO4zc4kV1L5PJ0zayez5vtlEUv8DPfgOM4WYlSVfCuI%0ASm%2BDyPwsfAskkRctgUQ%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1751011385/34980907314f4bcd454349e08147/Capture+d%E2%80%99e%CC%81cran+2025-09-29+a%CC%80+16_43_48.png?expires=1769162400&signature=fb849fae0ace55ececbce11db3e1591c4c10f0c483a0953a118bb9170ea2e61a&req=dSciF8l%2FnIJXXPMW1HO4zc4kV1L5PJ0zayez5vtlEUv8DPfgOM4WYlSVfCuI%0ASm%2BDyPwsfAskkRctgUQ%3D%0A)

**Ce que vous pouvez faire :**

* Créer des **catégories** (ex. Suivi, Coaching, Profil) pour organiser les actions.
* Ajouter des **actions** qui pointent vers n’importe quelle section de l’app (ex. **Données → Corporel & Stats** pour que vos clients mettent à jour leurs mensurations).
* **Renommer** les libellés et **réordonner** catégories et actions par **glisser-déposer**.

## Sauvegarde et synchronisation

Toutes les modifications **ne nécessitent pas** une synchronisation : **seules certaines** doivent être poussées vers l’app pour devenir visibles.

* **Sauvegarder** : vos changements sont enregistrés dans le BackOffice, mais ils ne sont pas encore visibles dans l’application. Vous pouvez donc continuer à modifier d'autres éléments.
* **Sauvegarder & synchroniser** : vos modifications sont appliquées dans l’application.

Voici l'écran que vous verrez apparaître :

[![](https://downloads.intercomcdn.com/i/o/emgoxqda/1752260563/eb6c5d5c9dffcdd15f4db7c95619/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-25%2Ba-CC-80%2B14_55_37.png?expires=1769162400&signature=83a9f3140030b38a90c4a472da9f10143c64d2904d0b08439dd5a2648b40cd30&req=dSciFMt4nYRZWvMW1HO4zczV9%2BoBvHD7CUDTHpzZMVx%2FFG9Vl22O92AE1RZP%0AbsjIYU%2BHajWhFY1y37k%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1752260563/eb6c5d5c9dffcdd15f4db7c95619/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-25%2Ba-CC-80%2B14_55_37.png?expires=1769162400&signature=83a9f3140030b38a90c4a472da9f10143c64d2904d0b08439dd5a2648b40cd30&req=dSciFMt4nYRZWvMW1HO4zczV9%2BoBvHD7CUDTHpzZMVx%2FFG9Vl22O92AE1RZP%0AbsjIYU%2BHajWhFY1y37k%3D%0A)

Quand vous allez sélectionner **“Sauvegarder & synchroniser”**, deux possibilités s’offrent à vous :

* **Synchroniser uniquement pour vous** → cela vous permet de tester vos modifications en prévisualisation en vous connectant, sans que vos clients les voient.
* **Synchroniser pour tous vos utilisateurs** → vos clients voient immédiatement les changements dans leur application.
* **Forcer la mise à jour →** pensez bien à sélectionner la petite case qui permet de forcer la mise à jour de l’application. Si vous ne le faites pas, vos clients ne verront pas les éléments modifiés ; pour voir la mise à jour, ils devront relancer l’application.

Une fois vos choix effectué, cliquez sur **Synchroniser** pour finaliser l’action.

[![](https://downloads.intercomcdn.com/i/o/emgoxqda/1752261095/64b0fbb676f2a46ffea94bc28299/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_24_37.png?expires=1769162400&signature=935cae77f3663644abb448d162e2944f5565f4ea3358cc2575ef96892b27947c&req=dSciFMt4nIFWXPMW1HO4zTByIpycK8xAx5RmoVzcxXV8NmgyEiKdj0cEO5wA%0A%2BDhZV%2ByzLNlGITLJ%2FVA%3D%0A)](https://downloads.intercomcdn.com/i/o/emgoxqda/1752261095/64b0fbb676f2a46ffea94bc28299/Capture%2Bd-E2-80-99e-CC-81cran%2B2025-09-29%2Ba-CC-80%2B16_24_37.png?expires=1769162400&signature=935cae77f3663644abb448d162e2944f5565f4ea3358cc2575ef96892b27947c&req=dSciFMt4nIFWXPMW1HO4zTByIpycK8xAx5RmoVzcxXV8NmgyEiKdj0cEO5wA%0A%2BDhZV%2ByzLNlGITLJ%2FVA%3D%0A)