Personnalisation avec du CSS
Vue d'ensemble
Il est généralement plus simple de personnaliser l'apparence dans l'application que dans le CSS. Dans l'onglet Style, vous pouvez définir les logos, les variantes de boutons, les couleurs, les polices, les surfaces (padding, radius, shadow, z-index) et les animations sans écrire de code. Consultez Comment personnaliser le style de la bannière, les couleurs, les logos et les boutons (Nouvelle version).
Utilisez Custom styling uniquement lorsque les contrôles Style ne permettent pas d'obtenir ce dont vous avez besoin (par exemple une disposition de bouton, un traitement de bordure ou une position de widget spécifique).
Étapes Legacy : Personnalisation avec du CSS (bannière Legacy).
Où ouvrir Custom styling
- Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
- Allez dans Settings > 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, choisissez Desktop et/ou Mobile si vous avez besoin de règles différentes selon l'écran.
- Collez votre CSS, puis cliquez sur Save lorsque la barre de modifications non enregistrées apparaît.
Testez sur la boutique en ligne dans une fenêtre privée. Si vous utilisez Enable for admins, seul le personnel connecté verra la bannière pendant vos tests.
Privilégier les paramètres de l'application avant le CSS
Objectif | À utiliser d'abord dans l'onglet Style |
|---|---|
Couleurs et mode clair/sombre | Colors |
Apparence des boutons (plein / contour, radius) | Buttons |
Largeur de la bannière, position, type de dialogue | Onglet Layout |
Famille et taille de police | Fonts |
Ombre, padding, bordure, empilement au-dessus du thème | Surfaces (y compris z-index) |
Animation à l'ouverture/fermeture | Animations |
Position du widget et de la notice | Layout (notice / preferences / consent widget) |
Si la bannière passe derrière un en-tête fixe ou une application de chat, augmentez Surfaces > z-index avant d'ajouter du CSS. Consultez Comment corriger une bannière masquée derrière des éléments du thème (Nouvelle version).
Exemples de CSS
Collez les règles dans CSS Rules, puis cliquez sur Save. Adaptez les couleurs et les tailles à votre marque.
Bordure d'accent sur la notice de cookies :
dialog.dialog.notice {
border-left: 4px solid #00ffbf;
}
Couleurs des boutons Accept et Decline :
button.filled.allow.primary {
background: #111111;
}
button.filled.deny.primary {
background: #666666;
}
Déplacer légèrement le widget de consentement vers le haut de la page :
button.widget.bottom.left {
bottom: 24px;
}
Pour des ajustements de couleur avancés, l'éditeur prend aussi en charge les variables CSS (par exemple --ai-bg, --ai-text) sur les dialogues de notice et de préférences. Votre équipe de support ou votre développeur peut vous aider si vous utilisez déjà des variables dans l'application.
Conseils
- Commencez par une seule petite modification, enregistrez, puis vérifiez la boutique en ligne.
- Utilisez les CSS Rules Desktop et Mobile lorsque vous avez besoin d'un style différent sur les petits écrans.
- Si une modification n'apparaît pas, attendez une minute et actualisez la page.
Articles associés
- Comment personnaliser le style de la bannière, les couleurs, les logos et les boutons (Nouvelle version)
- Personnalisation avec du CSS (bannière Legacy)
- Comment corriger une bannière masquée derrière des éléments du thème (Nouvelle version)
Mis à jour le : 02/10/2026
Merci !