Personnaliser le CSS de l'interface Baback

Le module CSS vous permet d’adapter l’apparence du portail de retour au-delà des couleurs et de l’image de fond : polices, espacements, bordures, boutons… Vous ajoutez vos propres règles CSS, sans toucher au code de Baback.

Paramètres → Portail client → CSS personnalisé

💡 Le module CSS n’est pas activé par défaut. Si vous ne le voyez pas dans votre portail client, contactez-nous pour l’activer sur votre boutique.

Comment ça fonctionne ?

Vous repérez l’élément à modifier dans le portail, grâce aux outils de votre navigateur.
Vous écrivez une règle CSS qui cible cet élément.
Vous l’enregistrez dans le module CSS personnalisé.
Votre style s’applique à tous vos clients sur le portail.

Étape 1 : identifier l’élément à personnaliser

Pour modifier un élément, il faut connaître sa classe CSS. Le portail en contient deux types :

les classes Baback, qui commencent par baback__ ;
les classes génériques, comme rounded, flex ou text-sm.

Pour trouver la classe d’un élément :

Ouvrez le portail de retour.
Faites un clic droit sur l’élément à personnaliser.
Sélectionnez Inspecter.
Repérez l’attribut class de l’élément.

Les classes Baback disponibles

Privilégiez ces classes autant que possible : contrairement aux classes génériques, elles ne changent pas quand l’interface évolue.

Classe	Élément visé
`baback__step-header-container` `baback__step-header-title` `baback__step-header-description`	L’en-tête de chaque étape : le bloc, son titre, sa description.
`baback__button-container`	Les boutons du portail.
`baback__input-container` `baback__input`	Les champs de saisie : le bloc et le champ lui-même.
`baback__item-to-select`	Les articles de la commande, sur l’écran de sélection.
`baback__option-selector-list` `baback__option-selector-item`	Les listes d’options (motifs, tailles, couleurs…) et chacune de leurs lignes.
`baback__resolution-item-container` `baback__resolution-item-title` `baback__resolution-item-description` `baback__resolution-item-recommended-badge` `baback__resolution-item-restricted-badge`	Les cartes de résolution (remboursement, échange, avoir…) : la carte, son titre, sa description, et les pastilles « recommandé » et « restreint ».
`baback__callout`	Les encarts d’information et d’alerte.

Étape 2 : écrire vos règles CSS

Ajoutez votre règle dans le module CSS personnalisé, en ciblant la classe repérée.

Exemple : des boutons noirs avec un texte blanc

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

Vous pouvez aussi cibler une classe générique si besoin :

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

⚠️ Ajoutez toujours !important à chacune de vos propriétés. Sans lui, certaines règles de Baback restent prioritaires et votre personnalisation ne s’applique pas.

Étape 3 : aller plus loin

Utiliser votre propre police

Déclarez d’abord votre police avec @font-face :

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

Puis appliquez-la à tout le portail :

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

Ou seulement à certains éléments, par exemple les titres :

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

Modifier le style de tout le portail

Certaines règles s’appliquent partout à la fois. Par exemple, pour supprimer tous les arrondis :

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

Étape 4 : tester vos modifications

Après chaque modification :

Cliquez sur Sauvegarder dans le module CSS personnalisé.
Retournez dans le back-office et cliquez sur Nouveau retour pour lancer un parcours.
Parcourez les différents écrans et vérifiez le rendu.

💡 Gardez les outils de développement de votre navigateur ouverts pendant le test : vous repérez ainsi les classes à ajuster au fil du parcours.

Besoin d’aide ?

En savoir plus les messages d’information personnalisés.
Pour toute question, contactez notre équipe : support@baback.co