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

Vue d'ensemble

La mise en page (position et type de fenêtre) fait l'objet d'un article distinct. Si vous passez de l'ancienne bannière (Legacy Banner), consultez Guide de migration : recréer votre apparence Legacy dans la New Version.

L'onglet Style contrôle l'apparence de la bannière, de la fenêtre de préférences et du widget de consentement. Vous pouvez téléverser des logos, choisir des styles de boutons, définir des couleurs (y compris clair et sombre), ajuster les surfaces et les polices, et ajouter du CSS personnalisé.

Style ne change pas le moment où les cookies sont autorisés. Les règles de consentement restent dans Settings > Consent model & regions.

Nouvelle bannière. Pour les boutiques qui affichent le badge New version dans Settings > Banner. Si vous utilisez l'ancienne bannière, consultez Comment passer à la nouvelle bannière ou revenir à la version précédente.

Étapes pour l'ancienne bannière : Guide de migration : recréer votre apparence 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 réservé aux administrateurs (New Version).
Utilisez l'aperçu dans l'application (Desktop / Mobile, Light / Dark) pendant la modification.

Ouvrir l'onglet Style

Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
Allez dans Settings > 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'avis sur les cookies et dans l'en-tête des préférences (sauf si Hide header est activé dans Layout).
Widget logo : apparaît sur le widget de consentement.

Téléversez un PNG ou un JPG, ou choisissez un logo dans la galerie. Après l'enregistrement, les mises à jour peuvent mettre un peu de temps à apparaître sur la boutique en ligne.

Boutons

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

Options typiques :

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

Utilisez un bouton Accept plein et un bouton Decline avec contour si vous voulez que Accept ressorte. Les exigences de Google concernant la bannière imposent toujours un bouton Decline clair et l'accès aux préférences. Consultez Comment créer une bannière conforme aux exigences 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 et accent déterminent les arrière-plans, le texte et les boutons.
Auto calculate / l'ajustement automatique peut dériver une palette 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 : marge intérieure, rayon des coins, flottant (fenêtre en suspension), bordure, ombre et z-index (la façon dont la bannière se superpose aux autres éléments du thème).
Fonts : famille et taille. Laissez vide pour suivre la police de la boutique.
Animations : activez ou désactivez le mouvement et définissez la durée. 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 le z-index. La valeur maximale est 2147483647. Consultez Comment corriger la bannière masquée par des éléments du thème (New Version).

Style personnalisé (CSS)

Pour les changements que les commandes de 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 l'ancienne bannière n'est pas copié lorsque vous passez à la nouvelle bannière. Ajoutez à nouveau les règles sous Style > Custom styling.

Mobile et ordinateur

De nombreux champs de 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 sur ordinateur (New Version).

Articles associés

Mis à jour le : 02/10/2026

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

Merci !