Dieser Artikel ist auch verfügbar in:

So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version)

Übersicht

Layout (Position und Dialogtyp) wird separat behandelt. Wenn Sie vom Legacy Banner kommen, lesen Sie den Migrationsleitfaden: Legacy-Look in der New Version nachbilden.

Der Tab Style steuert das Aussehen von Banner, Einstellungsdialog und Consent-Widget. Sie können Logos hochladen, Schaltflächenstile wählen, Farben festlegen (auch für Light und Dark), Oberflächen und Schriften anpassen sowie eigenes CSS hinzufügen.

Der Stil ändert sich nicht, wenn Cookies erlaubt werden. Die Einwilligungsregeln bleiben unter All settings > Consent model & regions.

New Banner. Für Shops mit dem Abzeichen New version auf Cookie banner. Zum Legacy Banner siehe So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version.

Schritte für Legacy: Migrationsleitfaden: Legacy-Look in der New Version nachbilden.

Bevor Sie beginnen

Prüfen Sie, ob die Seite Banner das Abzeichen New version anzeigt.
Verwenden Sie Enable for admins, wenn Sie im Live-Shop testen möchten, ohne Besuchern das Banner anzuzeigen. Siehe So aktivieren, deaktivieren oder testen Sie das Banner im Modus Nur für Admins (New Version).
Nutzen Sie die Vorschau in der App (Desktop / Mobile, Light / Dark), während Sie bearbeiten.

Öffnen Sie den Tab Style

Öffnen Sie Shopify-Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Öffnen Sie den Tab Style.
Speichern Sie, sobald die Leiste mit ungespeicherten Änderungen erscheint.

Logos

Sie können ein Logo für das Hauptbanner und ein separates Logo für das Consent-Widget festlegen.

Banner logo: erscheint im Kopfbereich von Cookie-Hinweis und Einstellungen (sofern nicht Hide header im Tab Content aktiviert ist).
Widget logo: erscheint im Consent-Widget.

Laden Sie eine PNG- oder JPG-Datei hoch oder wählen Sie ein Logo aus der Galerie. Nach dem Speichern kann es einen Moment dauern, bis Änderungen im Storefront sichtbar sind.

Schaltflächen

Die Schaltflächeneinstellungen gelten für primäre Aktionen (Accept / Deny all) und sekundäre Aktionen (Preferences / Save).

Übliche Optionen:

Gefüllte oder umrandete (Ghost-)Varianten
Größe und Eckenradius
Rahmen
Fette Schaltflächenbeschriftungen (Bereich Fonts)

Verwenden Sie eine gefüllte Schaltfläche Accept und eine umrandete Schaltfläche Decline, wenn Accept hervorgehoben werden soll. Die Banner-Vorgaben von Google verlangen trotzdem eine klar erkennbare Decline-Option und Zugang zu den Einstellungen. Siehe So erstellen Sie ein Banner, das die Banner-Vorgaben von Google erfüllt (New Version).

Farben

Wählen Sie einen Farbmodus (zum Beispiel Light oder Dark), eine Voreinstellung oder eigene Farben.

Base, primary, secondary, and accent-Farben bestimmen Hintergründe, Texte und Schaltflächen.
Auto calculate / auto-adjust kann eine Palette aus Ihrem Shopify-Theme ableiten, sodass Sie nicht jeden Hex-Wert von Hand eingeben müssen.
Prüfen Sie die Hintergründe Light und Dark in der Live-Vorschau, damit das Banner für Besucher im Dunkelmodus lesbar bleibt.

Oberflächen, Schriften und Animationen

Surfaces: Innenabstand, Eckenradius, Float (schwebendes Fenster), Rahmen, Schatten und Stacking Depth (z-index) (wie das Banner über anderen Theme-Elementen gestapelt wird).
Fonts: Familie und Größe. Leer lassen, um die Schrift des Shops zu übernehmen.
Animations: Bewegung aktivieren oder deaktivieren und Dauer festlegen. Der Animationstyp (Fade, Slide, Zoom, Grow) wird weiterhin unter Layout bestimmt.

Liegt das Banner hinter einem Sticky-Header oder Chat-Widget, erhöhen Sie Stacking Depth (z-index) (oder klicken Sie auf Set max). Der Maximalwert ist 2147483647. Siehe So beheben Sie, dass das Banner hinter Theme-Elementen verschwindet (New Version).

Eigenes Styling (CSS)

Für Änderungen, die die Style-Optionen nicht abdecken, verwenden Sie Custom styling / CSS Rules im selben Tab. Die Regeln gelten innerhalb der Web-Komponente pandectes-cmp.

Siehe Eigenes Styling mit CSS.

Eigenes CSS aus dem Legacy Banner wird beim Wechsel zum New Banner nicht übernommen. Fügen Sie die Regeln unter Style > Custom styling erneut hinzu.

Mobil und Desktop

Viele Style-Felder können sich auf Mobilgeräten unterscheiden. Verwenden Sie Mobile same as desktop oder Mobile different from desktop. Siehe So verwenden Sie unterschiedliche Banner-Layouts auf Mobil und Desktop (New Version).