ℹ️ 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. 🍪

Aktualisiert am: 10/09/2026