Personnalisation avec du CSS
Vue d’ensemble
La plupart des éléments de marque sont plus faciles à modifier dans l’application qu’en CSS. Dans l’onglet Style, vous pouvez définir les logos, les variantes de boutons, les couleurs, les polices, les surfaces (remplissage, rayon, ombre, z-index) et les animations sans écrire de code. Consultez Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (nouvelle version).
Utilisez Custom styling uniquement lorsque les contrôles de Style ne permettent pas d’obtenir ce dont vous avez besoin (par exemple une disposition de bouton particulière, un traitement des bordures ou la position d’un widget).
Étapes pour l’ancienne version : Personnalisation du style avec CSS (ancienne bannière).
Où ouvrir la personnalisation CSS
- Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
- Accédez à Cookie banner.
- Vérifiez que le badge New version est visible sur la page Banner.
- Ouvrez l’onglet Style.
- Faites défiler jusqu’à Custom styling (vous pouvez voir Learn more à côté du titre de la section, qui renvoie vers cet article).
- Sous CSS Rules, utilisez les icônes ordinateur et mobile si vous avez besoin de règles différentes selon la taille de l’écran.
- Collez votre CSS, puis cliquez sur Save lorsque la barre des modifications non enregistrées apparaît.
Testez sur la boutique dans une fenêtre privée. Si vous utilisez Enable for admins, seuls les membres du personnel connectés verront la bannière pendant vos tests.
Privilégier les paramètres de l’application avant le CSS
Objectif | Utiliser d’abord l’onglet Style |
|---|---|
Couleurs et mode clair/sombre | Colors |
Apparence des boutons (plein/contourné, rayon) | Buttons |
Largeur de la bannière, position, type de fenêtre | Onglet Layout |
Famille et taille de police | Fonts |
Ombre, remplissage, bordure, superposition au-dessus du thème | Surfaces (y compris Stacking Depth (z-index)) |
Animation à l’ouverture et à la fermeture | Animations |
Position du widget et de l’avis | Layout (avis / préférences / widget de consentement) |
Si la bannière se place derrière un en-tête fixe ou une application de chat, augmentez Surfaces > Stacking Depth (z-index) avant d’ajouter du CSS. Consultez Comment corriger une bannière masquée par les éléments du thème (nouvelle version).
Exemple de CSS
Collez les règles dans CSS Rules, puis cliquez sur Save. Ajustez les couleurs et les tailles pour correspondre à votre identité de marque.
Accent border on the cookie notice:
dialog.dialog.notice {
border-left: 4px solid #00ffbf;
}
Accept and Decline button colors:
button.filled.allow.primary {
background: #111111;
}
button.filled.deny.primary {
background: #666666;
}
Remontez légèrement le widget de consentement sur la page :
button.widget.bottom.left {
bottom: 24px;
}
Pour des ajustements de couleurs avancés, l’éditeur accepte aussi CSS variables (par exemple --ai-bg, --ai-text) sur les fenêtres d’avis et de préférences. Votre équipe support ou votre développeur peut vous aider si vous utilisez déjà des variables dans l’application.
Conseils
- Commencez par une petite modification, enregistrez, puis vérifiez la boutique.
- Utilisez les icônes ordinateur et mobile au-dessus de CSS Rules lorsque vous avez besoin d’un style différent sur les petits écrans.
- Si une modification ne s’affiche pas, patientez une minute et actualisez la page.
Articles associés
- Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (nouvelle version)
- Personnalisation du style avec CSS (ancienne bannière)
- Comment corriger une bannière masquée par les éléments du thème (nouvelle version)
Mis à jour le : 27/10/2026
Merci !