Personnaliser la mise en page de la bannière (version Legacy)

Vous pouvez personnaliser la mise en page et le style de votre bannière directement dans l'application. Cela vous permet de créer une apparence qui correspond à l'image de marque de votre organisation et à l'expérience utilisateur que vous souhaitez offrir.

Pour accéder à ces options, allez dans :
Settings > Banner > Style

Position

Choisissez où et comment la bannière apparaît sur votre site web :

1. Popup: centrée sur l'écran.
2. Overlay: fonctionne comme le popup, mais bloque la page jusqu'à ce que l'utilisateur interagisse avec la bannière.
3. Bar at the top: fixée en haut de l'écran.
4. Bar at the top (pushdown): descend depuis le haut en repoussant le contenu vers le bas. (Remarque : peut ne pas bien fonctionner avec les en-têtes fixes.)
5. Floating at the top left: positionnée en haut à gauche avec une petite marge.
6. Floating at the top center: positionnée en haut au centre avec une petite marge.
7. Floating at the top right: positionnée en haut à droite avec une petite marge.
8. Bar at the bottom: fixée en bas de l'écran.
9. Floating at the bottom left: positionnée en bas à gauche avec une petite marge.
10. Floating at the bottom center: positionnée en bas au centre avec une petite marge.
11. Floating at the bottom right: positionnée en bas à droite avec une petite marge.

Theme

Sélectionnez un thème pour contrôler le remplissage, le style des boutons et l'apparence :

1. Block: petit remplissage, boutons carrés de largeur proportionnelle.
2. Classic: petit remplissage, boutons arrondis de largeur égale.
3. Edgeless: aucun remplissage, boutons carrés de largeur égale.
4. Wired: identique à Block, mais avec les arrière-plans et les couleurs des boutons inversés.

Tableau comparatif des thèmes

Text Alignment

S'applique au titre, au message et au logo de la bannière :

• Left
• Center
• Right

Width

Ajuste la largeur de la bannière en unités em (relatives à la taille de la police). Exemple : 2em = deux fois la taille de la police.

• Contrôlée avec un curseur.
• Fonctionne avec l'aperçu en direct pour un résultat instantané.
• Utile pour les messages ou les libellés de boutons plus longs.
• Remarque : s'applique uniquement aux positions de type banner, pas aux barres (les barres occupent toujours toute la largeur).

Font Size

Ajuste la taille du texte en unités px. Exemple : 1px = 1/96th of 1 inch.

• Contrôlée avec un curseur.
• Fonctionne avec l'aperçu en direct.
• Utilise par défaut la taille définie par le thème de votre boutique.

Padding

Ajuste l'espace à l'intérieur de la bannière en unités px.

• Contrôlé avec un curseur.
• Fonctionne avec l'aperçu en direct.
• Les valeurs par défaut varient selon le thème.
• Remarque : non pris en charge avec le thème Edgeless.

Colors

Personnalisez les couleurs de la bannière et des boutons :

• Choisissez dans une palette ou définissez des couleurs personnalisées.
• Prend en charge les formats Hex (par ex., #123456) et RGBA.
• RGBA ajoute la prise en charge de la transparence en plus des valeurs rouge, vert et bleu.

Font Family

Par défaut, la bannière hérite de la police du thème de votre boutique. Vous pouvez aussi choisir parmi des polices web-safe prises en charge par tous les navigateurs :

• Arial, Arial Black, Verdana, Tahoma, Trebuchet MS, Impact
• Times New Roman, Didot, Georgia, American Typewriter
• Andalé Mono, Courier, Lucida Console, Monaco
• Bradley Hand, Brush Script MT, Luminari, Comic Sans MS

Si vous souhaitez utiliser une police personnalisée, chargez-la d'abord dans les assets de votre boutique et rendez-la disponible dans votre fichier CSS.

z-index

Contrôle l'ordre d'empilement de la bannière.

• Des valeurs plus élevées garantissent que la bannière apparaît au-dessus des autres éléments de la page.
• Ajustez-le en cas de conflit avec d'autres apps ou scripts.

Container ID

Définit l'ID HTML du conteneur de la bannière.

• Ne le modifiez que si vous avez besoin de cibler la bannière avec des scripts personnalisés ou des sélecteurs CSS.

Banner Shadow

Ajoute une ombre derrière la bannière.

• Utile lorsque les couleurs de la bannière et de l'arrière-plan sont proches, car cela améliore la visibilité.

Animation

Active les animations à l'apparition et à la fermeture de la bannière :

• Fondu enchaîné / glissement à l'ouverture.
• Fondu de sortie / glissement à la fermeture.

S'applique également au lien Re-open banner (Revoke), s'il est activé sous Behavior.

• Remarque : non pris en charge par tous les navigateurs.

Custom CSS

Ajoutez vos propres règles CSS pour une personnalisation supplémentaire.

• Utile pour affiner la taille des boutons, la couleur des bordures, les espacements, et plus encore.

Guide vidéo

Mis à jour le : 02/10/2026