Style personnalisé avec CSS (Legacy Banner)

Vue d'ensemble

Sur la Legacy Banner, la plupart des options d'apparence se trouvent dans Settings > Banner > Style : mise en page (position, largeur, thème), couleurs, logo, polices, z-index et animations. N'utilisez du CSS personnalisé que lorsque ces champs ne suffisent pas.

Le CSS personnalisé et le style avancé sont disponibles avec les plans payants (par exemple Plus et supérieurs), pas avec le plan gratuit Basic.

Legacy Banner. Pour les boutiques sans le badge New version sur Settings > Banner. Pour la nouvelle bannière (New Banner), consultez Comment passer à la nouvelle bannière ou revenir à la version précédente.

Étapes pour la New Banner : Style personnalisé avec CSS.

Où ajouter du CSS (Legacy Banner)

Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
Allez dans Settings > Banner.
Vérifiez que vous ne voyez pas le badge New version (l'interface Legacy utilise les onglets Behavior, Style et Content).
Ouvrez l'onglet Style.
Utilisez Layout, Colors et Advanced styling pour les polices, le z-index et les animations.
Ajoutez vos règles dans la zone de CSS personnalisé de l'onglet Style (incluse avec Advanced styling sur les plans payants).
Save, puis testez sur la boutique en ligne dans une fenêtre privée.

Comment la Legacy Banner apparaît dans le DOM

Racines typiques sur la boutique en ligne :

#pandectes-banner
Classes CookieConsent : .cc-window, .cc-message, .cc-compliance, .cc-btn

Le CSS du thème peut affecter la bannière legacy, car elle n'est pas dans un shadow root comme la New Banner. Préférez tout de même le champ de CSS personnalisé de Style dans Pandectes, pour que les règles suivent vos paramètres Pandectes.

Privilégiez les paramètres de l'application avant le CSS

Objectif	Emplacement Legacy
Barre, flottante ou popup	Style > Layout > Position
Largeur	Style > Layout > Width
Couleurs	Style > Colors
Logo	Style > Banner logo
Polices	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Libellés des boutons	Onglet Content

Exemples de sélecteurs (à vérifier sur votre boutique)

Limitez si possible les règles à la racine de la bannière :

Fenêtre de la bannière

#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}

Texte du message

#pandectes-banner .cc-message {
  font-size: 14px;
}

Boutons Accept / Decline

#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}

Ouvrez le panneau des préférences sur votre boutique et inspectez les noms de classes. Ils varient selon le type de bannière (Preferences, Informative, etc.). Consultez Modes de la bannière de cookies (version Legacy).

Inspecter la bannière en direct

Ouvrez la boutique en ligne avec la bannière visible.
Faites un clic droit sur la bannière puis Inspect.
Repérez #pandectes-banner ou .cc-window dans le DOM.
Copiez les noms de classes des éléments que vous voulez styliser. Ne collez pas les sélecteurs du guide de la New Banner (dialog.notice, pandectes-cmp).

Passer à la New Banner

Le CSS personnalisé de la Legacy ne migre pas automatiquement. Après la mise à niveau, recréez les règles dans Style > Custom styling sur la New Banner. Consultez :

Articles associés

Mis à jour le : 02/10/2026

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

Merci !