> ## 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). # 🎨 Cookie Consent – Design & Styling > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Der Design & Styling-Bereich gibt Ihnen die vollständige Kontrolle darüber, wie Ihr Cookie Consent-Banner in Ihrer Storefront erscheint. Von Vorlagen und Positionierung bis hin zu Farben, Typografie, Icons und Button-Styling kann fast jeder visuelle Aspekt des Banners an Ihr Store-Branding angepasst werden und eine professionellere Einwilligungserfahrung schaffen. # **⚠️ Bevor Sie beginnen** Um auf die Design & Styling-Einstellungen zuzugreifen: → offen **DSGVO EU Cookie Banner** → offen **Bannereinstellungen** → Navigieren zum **Design** Spitze 💡 Eine Live-Vorschau wird automatisch aktualisiert, wenn Sie Änderungen vornehmen, sodass Sie genau sehen können, wie das Banner vor dem Speichern angezeigt wird. --- ## **🎨 Meldebögen** Vorlagen bieten eine schnelle Möglichkeit, ein komplettes Bannerdesign anzuwenden, ohne jede Einstellung manuell zu konfigurieren. ### **Was es tut** Anwendung einer vordefinierten Kombination aus: * Hintergrundfarben * Textfarben * Knopffarben * Icon Farben Dies ermöglicht es Händlern, schnell ein poliertes Bannerdesign zu starten. --- ### **Verfügbare Vorlagen** Beispiele hierfür sind: * Wald * Wasser * Alarm * Purpur * Blau * Ozean * Gelb * Schwarz * Marine --- ### **Custom Template** Die Custom-Vorlage bietet einen neutralen Ausgangspunkt für Händler, die es vorziehen, ihr eigenes Design von Grund auf neu zu erstellen. 💡 Dies ist oft die beste Option, wenn Sie einen bestehenden Marken-Style-Guide zusammenstellen. --- ## **👀 Sichtbarkeit** Sichtbarkeit steuert, welche Geräte das Cookie Consent-Banner anzeigen. ### **Verfügbare Optionen** #### **Desktop & Mobile** Zeigt das Banner auf allen Geräten an. --- #### **Desktop nur** Zeigt das Banner nur auf Desktop-Geräten an. --- #### **Nur mobil** Zeigt das Banner nur auf mobilen Geräten an. Dies kann beim Testen oder Erstellen gerätespezifischer Erlebnisse nützlich sein. --- ## **📍 Positionseinstellungen** Positionseinstellungen steuern, wo das Banner auf Desktop- und Mobilgeräten erscheint. --- ### **💻 Desktop Display Typ** Bestimmt den Gesamtlayoutstil, der auf Desktop-Geräten verwendet wird. #### **Vollständige Bar** Zeigt ein Banner an, das sich über die Breite des Bildschirms erstreckt. Wird häufig für traditionelle Cookie-Einwilligungsbanner verwendet. --- #### **Float Card** Zeigt das Banner als kleinere Floating Card an. Dies schafft ein kompakteres Erscheinungsbild und reduziert die Bildschirmabdeckung. --- ### **📌 Desktop-Position** Verfügbare Positionen hängen vom gewählten Anzeigetyp ab. #### **Full Bar Positionen** * oben * Boden --- #### **Float Card Positionen** * Oben links * Oben rechts * Mittler * Unten links * Rechts unten rechts --- ### **📱 bewegliche Position** Steuerelemente, bei denen das Banner auf mobilen Geräten erscheint. Verfügbare Optionen sind: * oben * Mittler * Boden 💡 Bottom Placement wird oft bevorzugt, weil es sich auf kleineren Bildschirmen weniger aufdringlich anfühlt. --- ## **🎨 Card Styling** Card Styling steuert das Aussehen des Banner-Containers selbst. --- ### **🖼️ Hintergrundfarbe** Steuert die Hintergrundfarbe des Banners. Sie können: * Wählen Sie eine Farbe visuell * Hex Code manuell eingeben Dies hilft, das Banner mit Ihrem Storefront-Branding auszurichten. --- ### **⭕ Eckenradius** Kontrolliert, wie abgerundet die Bannerecken erscheinen. Niedrigere Werte erzeugen schärfere Ecken, während höhere Werte ein weicheres Aussehen erzeugen. --- ### **📐 Grenzflächen** Passen Sie den Banner-Umriss an. #### **Grenzgröße** Kontrolliert die Dicke der Grenze. --- #### **Randfarbe** Kontrolliert die Farbe der Grenze. Eine subtile Grenze kann dem Banner helfen, sich abzuheben, ohne sich ablenkend zu fühlen. --- ## **✍️ Typografie** Typografieeinstellungen steuern, wie Text im gesamten Cookie Consent-Banner angezeigt wird. --- ### **🔠 Schriftfamilie** Steuert die Schriftart, die für alle Bannertexte verwendet wird. #### **Verwenden Theme Font** Passt automatisch die von Ihrem Shopify Thema. --- #### **Custom Fonts** Wählen Sie aus dem unterstützten System und Google Fonts. Beispiele hierfür sind: * Roboto * Offene Sans * Montserrat * Mobben Die Verwendung der gleichen Schriftart wie Ihre Storefront schafft oft das nahtloseste Erlebnis. --- ### **📝 Titel Styling** Passen Sie den Bannertitel an. #### **Titelgröße** Steuert die Schriftgröße des Titels. #### **Titelfarbe** Steuert die Titeltextfarbe. --- ### **📄 Beschreibung Styling** Passen Sie den Körpertext an, der im Banner angezeigt wird. #### **Beschreibung Größe** Steuert die Schriftgröße. #### **Beschreibungsfarbe** Kontrolliert die Textfarbe. --- ### **🔗 Privacy Policy Link** Passen Sie das Aussehen des Links zur Datenschutzrichtlinie an. #### **Gliedmaße** Steuert die Schriftgröße. #### **Linkfarbe** Kontrolliert die Linkfarbe. Wählen Sie eine Farbe, die auffällig bleibt, während sie immer noch dem Gesamtdesign entspricht. --- ## **🔘 Knopfdesign** Diese Einstellungen steuern das Aussehen der Zustimmungsschaltflächen. --- ### **🎨 Knopffarbe** Steuert die Taste Hintergrundfarbe. Dies ist normalerweise eines der sichtbarsten Designelemente auf dem Banner. --- ### **🔤 Button Text Styling** Passen Sie das Aussehen des Button-Textes an. #### **Textgröße** Steuert die Größe der Button-Schrift. #### **Textfarbe** Steuert die Taste Schriftfarbe. --- ### **⭕ Eckenradius** Steuert, wie abgerundet die Knopfecken erscheinen. Dieser kann unabhängig vom Bannercontainer konfiguriert sein. --- ## **🎯 Icon Einstellungen** Icons helfen, das Banner visuell erkennbarer und ansprechender zu machen. --- ### **🍪 Cookie Banner Icon anzeigen** Aktiviert oder deaktiviert das Symbol, das neben dem Bannerinhalt angezeigt wird. Wenn aktiviert, wird eine Icon-Bibliothek verfügbar. --- ### **🖼️ Icon Selection** Wählen Sie aus einer Vielzahl von eingebauten Icons. Beispiele hierfür sind: * Cookie * Schutzschild * Verriegelung * Sicherheit * Information * Einstellungen * Anmeldung * Warnung * Checkliste Verschiedene Symbole können dazu beitragen, Privatsphäre, Sicherheit, Compliance oder allgemeine Informationen hervorzuheben. --- ### **🎨 Icon Farben** Passen Sie das Aussehen von Banner-Icons an. #### **Close Icon Farbe** Steuert die Farbe des Schließknopfes. --- #### **Arrow Icon Farbe** Steuert die Farbe des Pfeilsymbols wieder öffnen. Die Verwendung von Komplementärfarben hilft, ein zusammenhängendes Design beizubehalten. --- ## **📏 Textanpassung** Steuert, wie der Inhalt im Banner ausgerichtet ist. ### **Verfügbare Optionen** #### **Links** Richtet den Inhalt auf der linken Seite aus. --- #### **Zentrum** Zentriert alle Inhalte im Banner. --- #### **rechts** Richtet den Inhalt nach rechts aus. 💡 Center Alignment ist oft die ausgewogenste Option für Desktop- und Mobilgeräte. --- ## **⚠️ Wichtige Hinweise** ### **Vorlagen ersetzen vorhandene Farben** Die Auswahl einer neuen Vorlage ersetzt automatisch die aktuellen Farbeinstellungen. Für beste Ergebnisse: 1. Wählen Sie zuerst eine Vorlage 2. Wenden Sie dann benutzerdefinierte Farbanpassungen an --- ### **Positionsoptionen ändern sich dynamisch** Verfügbare Desktop-Positionen hängen vom gewählten Anzeigetyp ab. Wenn sich die Positionsauswahl unerwartet ändert, überprüfen Sie, ob Full Bar oder Float Card ausgewählt ist. --- ### **Icons müssen aktiviert werden** Die Icon Library wird nur angezeigt, wenn: **Cookie Banner Icon anzeigen** ist aktiviert. --- ### **Visibility Controls Device Targeting** Wenn das Banner auf einem Gerät erscheint, aber nicht auf einem anderen, überprüfen Sie die ausgewählte Sichtbarkeitseinstellung. --- ### **Live Preview Updates automatisch** Das Vorschaufeld wird aktualisiert, wenn Änderungen vorgenommen werden, sodass Sie Ihr Design vor dem Speichern überprüfen können. --- # **🚀 Endergebnis** Einmal erfolgreich konfiguriert: ✅ Das Cookie Consent-Banner passt zu Ihrem Storefront-Branding ✅ Farben, Typografie und Buttons stimmen mit Ihrem Thema überein ✅ Bannerplatzierung ist für Desktop und Mobile optimiert ✅ Icons und Styling verbessern die visuelle Klarheit ✅ Besucher erhalten eine polierte Zustimmung Erfahrung ✅ Compliance-Messaging fühlt sich professionell an, ohne das Einkaufserlebnis zu stören Ein gut gestaltetes Cookie Consent-Banner hilft, die Compliance aufrechtzuerhalten und gleichzeitig ein vertrauenswürdigeres und nahtloseres Erlebnis für Ihre Besucher zu schaffen. 🍪 ---