> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Consentement aux cookies – Conception et style > ℹ️ **Note:** Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien. La section Design & Styling vous donne un contrôle complet sur la façon dont votre bannière Consentement aux cookies apparaît sur votre vitrine. Des modèles et du positionnement aux couleurs, typographie, icônes et style de bouton, presque tous les aspects visuels de la bannière peuvent être personnalisés pour correspondre à votre marque de magasin et créer une expérience de consentement plus professionnel. # **⚠️ Avant de commencer** Pour accéder aux paramètres Design & Styling : → Ouvrir **RGPD Cookie Banner EU** → Ouvrir **Paramètres de la bannière** → Naviguez vers la **Conception** onglet 💡 Une mise à jour de prévisualisation en direct automatiquement lorsque vous effectuez des modifications, vous permettant de voir exactement comment la bannière apparaîtra avant d'enregistrer. --- ## **🎨 Modèles** Les modèles offrent un moyen rapide d'appliquer une bannière complète sans configurer manuellement chaque réglage. ### **Ce qu'il fait** Applique une combinaison prédéfinie de: * Couleurs de fond * Couleurs du texte * Couleurs du bouton * Couleurs de l'icône Cela permet aux marchands de lancer rapidement une bannière polie. --- ### **Modèles disponibles** Voici quelques exemples : * Forêt * Aqua * Alerte * Pourpre * Bleu * Océan * Jaune * Noir * Marine --- ### **Modèle personnalisé** Le modèle personnalisé fournit un point de départ neutre pour les marchands qui préfèrent construire leur propre conception à partir de zéro. 💡 C'est souvent la meilleure option lorsqu'il s'agit de faire correspondre un guide de style de marque existant. --- ## **👀 Visibilité** Contrôles de visibilité quels appareils affichent la bannière Consentement aux cookies. ### **Options disponibles** #### **Bureau & Mobile** Affiche la bannière sur tous les appareils. --- #### **Bureau seulement** Affiche la bannière uniquement sur les appareils de bureau. --- #### **Mobile seulement** Affiche la bannière uniquement sur les appareils mobiles. Cela peut être utile lors des tests ou de la création d'expériences spécifiques à un appareil. --- ## **📍 Paramètres de position** Réglages de position contrôle où la bannière apparaît sur les appareils de bureau et mobiles. --- ### **💻 Type d'affichage de bureau** Détermine le style général de mise en page utilisé sur les appareils de bureau. #### **Barre complète** Affiche une bannière étendue sur la largeur de l'écran. Utilisé couramment pour les bannières traditionnelles de consentement aux cookies. --- #### **Carte flottante** Affiche la bannière comme une carte flottante plus petite. Cela crée une apparence plus compacte et réduit la couverture de l'écran. --- ### **📌 Position du bureau** Les positions disponibles dépendent du type d'affichage sélectionné. #### **Postes de barre complète** * Haut * Bas --- #### **Positions des cartes flottantes** * En haut à gauche * En haut à droite * Moyenne * En bas à gauche * En bas à droite --- ### **📱 Position mobile** Contrôles où la bannière apparaît sur les appareils mobiles. Les options disponibles sont les suivantes: * Haut * Moyenne * Bas 💡 Le placement en bas est souvent préféré parce qu'il se sent moins intrusif sur les petits écrans. --- ## **🎨 Caractéristiques des cartes** Card Styling contrôle l'apparence du conteneur de bannière lui-même. --- ### **🖼️ Couleur de fond** Contrôle la couleur de fond de la bannière. Vous pouvez : * Sélectionnez visuellement une couleur * Saisissez un code Hex manuellement Cela permet d'aligner la bannière sur votre marque de magasin. --- ### **⭕ Rayon d'angle** Contrôle la façon dont les coins de la bannière apparaissent. Les valeurs inférieures créent des coins plus nets tandis que les valeurs supérieures créent une apparence plus douce. --- ### **📐 Paramètres de la frontière** Personnalisez le contour de la bannière. #### **Taille de la bordure** Contrôle l'épaisseur de la bordure. --- #### **Couleur de la bordure** Contrôle la couleur de la bordure. Une bordure subtile peut aider la bannière à se démarquer sans se sentir distrait. --- ## **✍️ Typographie** Les paramètres typographiques contrôlent comment le texte apparaît dans la bannière Consentement aux cookies. --- ### **🔠 Famille de polices** Contrôle la police utilisée sur tout le texte de la bannière. #### **Utiliser la police thématique** Correspond automatiquement à la typographie utilisée par votre Shopify thème. --- #### **Polices personnalisées** Choisissez parmi le système pris en charge et Google Fonts. Voici quelques exemples : * Roboto * Ouvrir Sans * Montserrat * Pommes de terre L'utilisation de la même police que votre magasin crée souvent l'expérience la plus transparente. --- ### **📝 Titre** Personnalisez le titre de la bannière. #### **Taille du titre** Contrôle la taille de la police titre. #### **Couleur du titre** Contrôle la couleur du texte. --- ### **📄 Description du produit** Personnalisez le texte du corps affiché à l'intérieur de la bannière. #### **Désignation Taille** Contrôle la taille de la police. #### **Description Couleur** Contrôle la couleur du texte. --- ### **🔗 Politique de confidentialité Lien** Personnalisez l'apparence du lien Politique de confidentialité. #### **Taille du lien** Contrôle la taille de la police. #### **Couleur du lien** Contrôle la couleur du lien. Choisissez une couleur qui reste perceptible tout en correspondant au design global. --- ## **🔘 Conception du bouton** Ces paramètres contrôlent l'apparence des boutons de consentement. --- ### **🎨 Couleur du bouton** Contrôle la couleur de fond du bouton. C'est généralement l'un des éléments de conception les plus visibles sur la bannière. --- ### **🔤 Styling de texte de bouton** Personnalisez l'apparence du texte du bouton. #### **Taille du texte** Contrôle la taille de la police bouton. #### **Couleur du texte** Contrôle la couleur de la police bouton. --- ### **⭕ Rayon d'angle** Contrôle la façon dont les coins des boutons apparaissent. Cela peut être configuré indépendamment du conteneur de bannière. --- ## **🎯 Paramètres de l' icône** Les icônes aident à rendre la bannière plus visuellement reconnaissable et engageante. --- ### **🍪 Afficher l'icône de bannière de cookies** Active ou désactive l'icône affichée à côté du contenu de la bannière. Une fois activée, une bibliothèque d'icônes devient disponible. --- ### **🖼️ Sélection des icônes** Choisissez parmi plusieurs icônes intégrées. Voici quelques exemples : * Cookie * Bouclier * Verrouillage * Sécurité * Informations * Paramètres * Notification * Avertissement * Liste de contrôle Différentes icônes peuvent aider à mettre l'accent sur la confidentialité, la sécurité, la conformité ou l'information générale. --- ### **🎨 Couleurs de l'icône** Personnalisez l'apparence des icônes de bannière. #### **Fermer la couleur de l'icône** Contrôle la couleur du bouton de fermeture. --- #### **Couleur de l'icône de flèche** Contrôle la couleur de l'icône de la flèche de réouverture. L'utilisation de couleurs complémentaires permet de maintenir une conception cohérente. --- ## **📏 Alignement du texte** Contrôle comment le contenu est aligné à l'intérieur de la bannière. ### **Options disponibles** #### **Gauche** Aligne le contenu sur le côté gauche. --- #### **Centre** Centre tout le contenu de la bannière. --- #### **Droite** Aligne le contenu sur le côté droit. 💡 L'alignement du centre est souvent l'option la plus équilibrée sur les appareils de bureau et mobiles. --- ## **⚠️ Remarques importantes** ### **Modèles Remplacer les couleurs existantes** La sélection d'un nouveau modèle remplace automatiquement les paramètres de couleur actuels. Pour de meilleurs résultats: 1. Sélectionner un modèle d'abord 2. Ensuite, appliquez tout ajustement de couleur personnalisé --- ### **Options de position Changement dynamique** Les positions de bureau disponibles dépendent du type d'affichage sélectionné. Si les choix de position changent de façon inattendue, vérifiez si la barre pleine ou la carte flottante est sélectionnée. --- ### **Les icônes doivent être activées** La bibliothèque d'icônes n'apparaît que lorsque : **Afficher l'icône de bannière de cookies** est activé. --- ### **Contrôles de visibilité Ciblage de l'appareil** Si la bannière apparaît sur un appareil, mais pas sur un autre, vérifiez le paramètre de visibilité sélectionné. --- ### **Mises à jour d'aperçu en direct automatique** Le panneau d'aperçu se rafraîchit au fur et à mesure que des modifications sont apportées, vous aidant à revoir votre conception avant d'enregistrer. --- # **🚀 Résultat final** Une fois configuré avec succès : ✅ La bannière Consentement aux cookies correspond à votre marque ✅ Couleurs, typographie et boutons se sentent cohérents avec votre thème ✅ Banner placement est optimisé pour le bureau et mobile ✅ Les icônes et le style améliorent la clarté visuelle ✅ Les visiteurs reçoivent une expérience de consentement plus précise ✅ La messagerie de conformité se sent professionnelle sans perturber l'expérience d'achat Une bannière de consentement aux cookies bien conçue aide à maintenir la conformité tout en créant une expérience plus fiable et transparente pour vos visiteurs. 🍪 ---