Le module de personnalisation CSS disponible dans le portail client permet d'adapter l'apparence de l'interface Baback sans modifier le code de l'application.

Vous pouvez ajouter vos propres règles CSS afin de personnaliser les couleurs, les polices, les espacements, les bordures, les boutons ou tout autre élément de l'interface.

Le module de personnalisation CSS n'est pas actif par défaut. Si vous ne le voyez pas dans votre portail client, contactez-nous pour qu'on l'active sur votre boutique.

Pour modifier un élément, il est nécessaire d'identifier sa classe CSS.

Deux types de classes sont présents dans l'interface :

• les classes spécifiques à Baback, préfixées par baback__ ;

• les classes CSS plus génériques (par exemple rounded, flex, text-sm, etc.).

Les classes peuvent être récupérées directement depuis les outils de développement de votre navigateur.

1. Ouvrez Baback.

2. Faites un clic droit sur l'élément à personnaliser.

3. Sélectionnez Inspecter.

4. Repérez l'attribut class de l'élément.

5. Utilisez les classes identifiées dans votre feuille CSS personnalisée.

Le portail expose les classes suivantes. Ce sont des points d'accroche stables : contrairement aux classes génériques, elles ne changent pas quand l'interface évolue. Privilégiez-les autant que possible.

Une fois la classe identifiée, ajoutez simplement votre règle CSS dans le module de personnalisation.

Exemple :

.baback__button-container {
    background-color: #000 !important;
    color: #fff !important;
}

Vous pouvez également cibler des classes génériques lorsque cela est nécessaire.

.text-sm {
    font-size: 15px !important;
}

⚠️ Important

Pour garantir que vos styles personnalisés prennent le dessus sur ceux de Baback, il est recommandé d'ajouter !important à chacune de vos propriétés CSS.

Exemple :

.baback__resolution-item-container {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
}

Sans !important, certaines règles de l'application peuvent avoir une priorité supérieure et empêcher l'application de votre personnalisation.

Vous pouvez également importer vos propres polices grâce à la règle @font-face.

Exemple :

@font-face {
    font-family: 'inter';
    src: url('https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwYZ8UA3.woff2') format('woff2');
}

@font-face {
    font-family: 'akshar';
    src: url('https://fonts.gstatic.com/s/akshar/v9/Yq6I-LyHWTfz9rGoqDaUbHvhkAUsSagC-9eS9qfpjPaaXg.woff2') format('woff2');
}

Une fois la police déclarée, vous pouvez l'utiliser sur les éléments souhaités.

Par exemple :

body {
    font-family: 'inter', sans-serif !important;
}

Ou uniquement sur certains composants :

.text-2xl.font-semibold {
    font-family:"inter" !important;
    text-transform: uppercase !important;
}

Vous pouvez également modifier des styles utilisés dans toute l'application.

Par exemple, pour supprimer tous les arrondis :

.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl {
    border-radius: 0 !important;
}

Ce type de règle permet de personnaliser rapidement le style global de Baback.

La meilleure méthode consiste à parcourir les différents écrans du processus tout en inspectant les éléments avec les outils de développement de votre navigateur.

Après chaque modification :

1. Enregistrez votre feuille CSS dans le portail client.

2. Retournez dans le backoffice.

3. Cliquez sur Nouveau retour afin de relancer un parcours.

4. Vérifiez immédiatement le rendu de vos modifications.

Cette méthode permet d'identifier rapidement les classes à personnaliser et de valider vos changements.