Personnalisation visuelle

Personnalisez l’apparence de votre interface B2CORE en activant les thèmes clair et sombre, en important des logos et des arrière-plans, en ajustant les couleurs et en ajoutant des scripts personnalisés pour l’image de marque et les fonctionnalités

Utilisez les options de cette section pour personnaliser l’apparence de votre interface B2CORE afin de refléter le style unique de votre marque.

Points clés

Les options disponibles vous permettent de :

Sélectionner si vous souhaitez activer le thème clair, le thème sombre ou les deux pour votre interface B2CORE, et choisir celui qui doit être défini par défaut.
Importer des logos personnalisés pour les deux thèmes de votre interface B2CORE.
Ajuster les couleurs de différents éléments de l’interface pour les thèmes clair et sombre.
Définir et mettre à jour les images d’arrière-plan des pages Sign In et Sign Up de l’interface B2CORE.
Ajouter des scripts personnalisés, par exemple pour l’intégration d’un chatbot et le suivi analytique.

Ressources

Sur cette page, vous pouvez importer ou modifier les logos affichés dans votre interface B2CORE, ainsi que les images d’arrière-plan des pages Sign Up et Sign In, si nécessaire.

Logo pour le thème clair

Le logo principal affiché dans l’interface B2CORE lorsque le thème clair est activé.

Format requis : SVG avec arrière-plan transparent, taille de fichier jusqu’à 10 MB.

Logo court pour le thème clair

Une version compacte du logo affichée lorsque le menu principal est réduit dans le thème clair.

Format requis : SVG avec arrière-plan transparent, taille de fichier jusqu’à 10 MB.

Logo pour le thème sombre

Le logo principal affiché dans l’interface B2CORE lorsque le thème sombre est activé.

Format requis : SVG avec arrière-plan transparent, taille de fichier jusqu’à 10 MB.

Logo court pour le thème sombre

Une version compacte du logo affichée lorsque le menu principal est réduit dans le thème sombre.

Format requis : SVG avec arrière-plan transparent, taille de fichier jusqu’à 10 MB.

Favicon (.ico)

La petite icône affichée dans l’onglet du navigateur.

Format requis : ICO, taille de fichier jusqu’à 10 MB.

Favicon (.svg)

La version vectorielle du favicon pour les navigateurs prenant en charge SVG.

Format requis : SVG, taille de fichier jusqu’à 10 MB. Sera utilisée comme icône redimensionnable.

Icône Apple touch

L’icône affichée sur les appareils Apple lorsque la page de l’interface B2CORE est ajoutée à l’écran d’accueil.

Format requis : PNG, 180×180 pixels, taille de fichier jusqu’à 10 MB.

Arrière-plan du thème clair

L’image d’arrière-plan appliquée aux pages Sign Up et Sign In lorsque le thème clair est activé. L’ajout d’une image d’arrière-plan est facultatif.

Format recommandé : SVG, JPG ou PNG, taille de fichier jusqu’à 10 MB.

Arrière-plan du thème sombre

L’image d’arrière-plan appliquée aux pages Sign Up et Sign In lorsque le thème sombre est activé. L’ajout d’une image d’arrière-plan est facultatif.

Format recommandé : SVG, JPG ou PNG, taille de fichier jusqu’à 10 MB.

Images du panneau d’administration

Dans cette section, vous pouvez importer les images affichées dans le Back Office (format recommandé : JPG, PNG ou SVG, taille de fichier jusqu’à 10 MB) :

Logo du menu — le logo affiché dans le menu principal du Back Office
Logo de la page de connexion — le logo affiché sur la page de connexion au Back Office
Arrière-plan de la page de connexion — l’image d’arrière-plan appliquée à la page de connexion au Back Office

Palette de couleurs

Sur cette page, personnalisez les paramètres de couleur des thèmes clair et sombre de votre interface B2CORE.

Dans la section Brand Configuration, vous pouvez configurer rapidement l’identité de votre marque en spécifiant la Brand color et en activant l’option Tinted backgrounds, qui applique une légère teinte de la couleur de marque aux arrière-plans de l’interface.

Les paramètres de couleur des éléments individuels de l’interface décrits ci-dessous sont disponibles dans la section Advanced color settings.

Thème clair activé

Cochez la case pour activer le thème clair pour l’interface B2CORE.

Activez l’option Default pour définir le thème clair comme thème par défaut si les deux thèmes sont activés.

Thème sombre activé

Cochez la case pour activer le thème sombre pour l’interface B2CORE.

Activez l’option Default pour définir le thème sombre comme thème par défaut si les deux thèmes sont activés.

Si aucune des cases de thème n’est sélectionnée, votre interface B2CORE utilisera les thèmes clair et sombre prédéfinis du design B2BDemo, et tous les paramètres de couleur personnalisés répertoriés ci-dessous seront ignorés.

Si les deux cases de thème sont sélectionnées, les deux thèmes seront disponibles pour les clients dans l’interface B2CORE, avec les paramètres de couleur personnalisés appliqués.

Les paramètres de couleur avancés sont organisés dans les sections Semantic Tokens V1 (Light / Dark) et Semantic Tokens V2 (Light / Dark), ce qui vous permet de personnaliser chaque jeton de couleur séparément pour les thèmes clair et sombre. Pour réinitialiser les jetons de couleur aux valeurs dérivées de votre couleur de marque, cliquez sur le bouton Reset colors from brand.

Seuls les codes de couleur hexadécimaux de 6 ou 8 caractères sont pris en charge.

La section Semantic Tokens V1 (Light / Dark) comprend les groupes de jetons suivants :

Accent — accent, accentHover, accent40, accent10, demo
Statut — positive, positive20, medium, medium20, negative, negative20
Surface — background, background96, card, field, disabled, overlay, tooltip, divider
Texte — textMain, textSecondary, textSecondary40, textContrast

La section Semantic Tokens V2 (Light / Dark) comprend les groupes de jetons suivants :

Accent — brand, brandSubtle, brandMuted, alternative, alternativeSubtle, alternativeMuted, positive, positiveSubtle, positiveMuted, medium, mediumSubtle, mediumMuted, negative, negativeSubtle, negativeMuted, neutral, overlay, overlaySubtle, overlayMuted
Caractère — onSurface, onSurfaceSecondary, onSurfaceInverse, onBrand, onAlternative, onPositive, onMedium, onNegative, onNeutral, onOverlay, onSurfaceBrand, onSurfaceAlternative, onSurfacePositive, onSurfaceMedium, onSurfaceNegative, onSurfaceOverlay
Surface — surfaceLow, surface, surfaceHigh, surfaceHighest, surfaceInverse, backdrop
Contour — outline, outlineStrong
État — stateHovered, statePressed, stateHoveredInverse, statePressedInverse, stateDarken, stateDarkenStrong

Variables supplémentaires des thèmes clair/sombre (json)

Utilisez ce champ pour spécifier un objet JSON avec des variables supplémentaires, telles que celles qui définissent le comportement d’une image d’arrière-plan dans le thème concerné :

{
"optional-external-bg-position": "0 0",
"optional-external-bg-size": "cover",
"optional-external-bg-repeat": "no-repeat",
"optional-external-bg-attachment": "fixed"
}

"optional-external-bg-position": "0 0"

Positionne l’image d’arrière-plan dans le coin supérieur gauche.

"optional-external-bg-size": "cover"

Redimensionne l’image d’arrière-plan afin de couvrir toute la page.

"optional-external-bg-repeat": "no-repeat"

Empêche l’image d’arrière-plan de se répéter (en mosaïque) dans toutes les directions.

"optional-external-bg-attachment": "fixed"

Maintient l’image d’arrière-plan fixe lors du défilement de la page. Elle ne se déplace pas avec le contenu.

Champs

Sur cette page, vous pouvez spécifier des champs de personnalisation supplémentaires.

Nom du projet

Le nom de votre projet affiché dans l’interface B2CORE.

Scripts (js-script)

Ajoutez ici vos scripts JavaScript (JS). Ces scripts seront exécutés automatiquement lorsque la page Sign Up ou Sign In est ouverte par les clients.

Personnalisation visuelle

Points clés

Ressources

Images du panneau d’administration

Palette de couleurs

Développer pour afficher les paramètres personnalisés

Champs

Sur cette page