Cet article est aussi disponible en :

Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (New Version)

Vue d’ensemble

Le Layout (position et type de boîte de dialogue) est traité séparément. Si vous migrez depuis la Legacy Banner, consultez Guide de migration : recréer votre look Legacy dans la New Version.

L'onglet Style contrôle l'apparence de la bannière, de la boîte de dialogue des préférences et du widget de consentement. Vous pouvez importer des logos, choisir les styles de boutons, définir les couleurs (y compris en mode clair et sombre), ajuster les surfaces et les polices, et ajouter du CSS personnalisé.

Le Style ne change pas lorsque les cookies sont autorisés. Les règles de consentement restent dans All settings > Consent model & regions.

New Banner. Pour les boutiques qui ont le badge New version sur Cookie banner. Pour la Legacy Banner, consultez Comment passer à la nouvelle bannière ou revenir à la version précédente.

Étapes Legacy : Guide de migration : recréer votre look Legacy dans la New Version.

Avant de commencer

Vérifiez que la page Banner affiche le badge New version.
Utilisez Enable for admins si vous voulez tester sur la boutique en ligne sans afficher la bannière aux visiteurs. Consultez Comment activer, désactiver ou tester la bannière en mode admin uniquement (New Version).
Utilisez l'aperçu intégré (Desktop / Mobile, Light / Dark) pendant vos modifications.

Ouvrir l'onglet Style

Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
Accédez à Cookie banner.
Ouvrez l'onglet Style.
Enregistrez lorsque la barre des modifications non enregistrées apparaît.

Logos

Vous pouvez définir un logo pour la bannière principale et un logo distinct pour le widget de consentement.

Banner logo : apparaît dans l'en-tête de la Cookie notice et des Preferences (sauf si Hide header est activé dans l'onglet Content).
Widget logo : apparaît sur le widget de consentement.

Importez un fichier PNG ou JPG, ou choisissez un logo dans la galerie. Après l'enregistrement, les mises à jour de la boutique peuvent prendre un court instant avant d'apparaître.

Boutons

Les réglages des boutons s'appliquent aux actions principales (Accept / Deny all) et secondaires (Preferences / Save).

Options courantes :

Variantes pleines ou en contour (ghost)
Taille et rayon des angles
Bordure
Libellés de boutons en gras (section fonts)

Utilisez un bouton Accept plein et un bouton Decline en contour si vous voulez que Accept se démarque. Les exigences de bannière de Google imposent toujours un Decline clair et un accès aux préférences. Consultez Comment créer une bannière qui respecte les exigences de bannière de Google (New Version).

Couleurs

Choisissez un mode de couleur (par exemple clair ou sombre), un préréglage ou vos propres couleurs.

Les couleurs Base, primary, secondary, and accent déterminent les arrière-plans, le texte et les boutons.
Auto calculate / auto-adjust peut générer une palette à partir de votre thème Shopify, pour que vous n'ayez pas à saisir chaque valeur hexadécimale à la main.
Prévisualisez les arrière-plans Light et Dark dans l'aperçu en direct pour que la bannière reste lisible pour les visiteurs qui utilisent le mode sombre.

Surfaces, polices et animations

Surfaces : padding, rayon des angles, float (fenêtre flottante), bordure, ombre, et Stacking Depth (z-index) (comment la bannière s'empile au-dessus des autres éléments du thème).
Fonts : famille et taille. Laissez vide pour suivre la police de la boutique.
Animations : activez ou désactivez les animations et réglez leur durée. Le Layout choisit toujours le type d'animation (fade, slide, zoom, grow).

Si la bannière passe derrière un en-tête fixe ou un widget de chat, augmentez Stacking Depth (z-index) (ou cliquez sur Set max). La valeur maximale est 2147483647. Consultez Comment corriger une bannière masquée derrière les éléments du thème (New Version).

Style personnalisé (CSS)

Pour les modifications que les contrôles Style ne permettent pas, utilisez Custom styling / CSS Rules dans le même onglet. Les règles s'appliquent à l'intérieur du composant web pandectes-cmp.

Consultez Style personnalisé avec CSS.

Le CSS personnalisé de la Legacy Banner ne se copie pas lorsque vous passez à la New Banner. Ajoutez à nouveau les règles sous Style > Custom styling.

Mobile et desktop

De nombreux champs Style peuvent différer sur mobile. Utilisez Mobile same as desktop ou Mobile different from desktop. Consultez Comment utiliser des mises en page de bannière différentes sur mobile et desktop (New Version).

Articles associés

Mis à jour le : 27/10/2026

Cet article a-t-il répondu à vos questions ?

Merci !