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

Überblick

Das Layout (Position und Dialogtyp) wird gesondert behandelt. Wenn Sie vom Legacy-Banner umsteigen, siehe Migrationsleitfaden: Ihren Legacy-Look in der neuen Version nachbauen.

Der Reiter Style steuert, wie Banner, Präferenzfenster und Consent Widget aussehen. Sie laden Logos hoch, wählen Schaltflächenstile, setzen Farben (auch für hell und dunkel), passen Flächen und Schriften an und ergänzen eigenes CSS.

Style ändert nichts daran, wann Cookies erlaubt sind. Die Einwilligungsregeln bleiben unter All settings > Consent model & regions.

Neuer Banner. Gilt für Shops mit dem Hinweis New version unter Cookie banner. Beim Legacy-Banner siehe So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version.

Schritte für Legacy: Migrationsleitfaden: Ihren Legacy-Look in der neuen Version nachbauen.

Bevor Sie beginnen

Prüfen Sie, ob die Banner-Seite den Hinweis New version zeigt.
Nutzen Sie Enable for admins, wenn Sie im Live-Shop testen möchten, ohne Besuchern den Banner zu zeigen. Siehe So aktivieren, deaktivieren oder testen Sie den Banner im Admin-Modus (Neue Version).
Nutzen Sie beim Bearbeiten die Vorschau in der App (Desktop / Mobil, Hell / Dunkel).

Den Reiter Style öffnen

Öffnen Sie Shopify Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Öffnen Sie den Reiter Style.
Speichern Sie, sobald die Leiste für ungespeicherte Änderungen erscheint.

Logos

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

Banner-Logo — erscheint im Kopfbereich von Cookie-Hinweis und Präferenzen (sofern im Layout nicht Hide header 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 die Änderung im Shop erscheint.

Schaltflächen

Die Einstellungen gelten für die primären Aktionen (Accept und Deny all) und die sekundären Aktionen (Preferences und Save).

Übliche Optionen:

gefüllte oder umrandete (Ghost-)Varianten
Größe und Eckenrundung
Rahmen
fette Beschriftungen (im Bereich Fonts)

Nutzen Sie eine gefüllte Schaltfläche Accept und eine umrandete Schaltfläche Decline, wenn Accept hervorstechen soll. Die Banner-Anforderungen von Google verlangen weiterhin ein klar erkennbares Decline und Zugang zu den Präferenzen. Siehe So erstellen Sie einen Banner, der die Anforderungen von Google erfüllt (Neue Version).

Farben

Wählen Sie einen Farbmodus (etwa hell oder dunkel), eine Vorlage oder eigene Farben.

Die Farben Base, Primary, Secondary und Accent bestimmen Hintergründe, Text und Schaltflächen.
Auto calculate beziehungsweise die automatische Anpassung leitet eine Palette aus Ihrem Shopify-Theme ab, sodass Sie nicht jeden Hex-Wert von Hand eintragen müssen.
Prüfen Sie in der Live-Vorschau die Hintergründe Light und Dark, damit der Banner auch für Besucher im Dunkelmodus lesbar bleibt.

Flächen, Schriften und Animationen

Surfaces — Innenabstand, Eckenrundung, Float (schwebendes Fenster), Rahmen, Schatten und z-index (wie der Banner über anderen Theme-Elementen liegt).
Fonts — Schriftfamilie und -größe. Lassen Sie die Felder leer, um die Schrift des Shops zu übernehmen.
Animations — Bewegung aktivieren oder deaktivieren und die Dauer festlegen. Den Animationstyp (Fade, Slide, Zoom, Grow) wählen Sie weiterhin im Layout.

Liegt der Banner hinter einem fixierten Header oder einem Chat-Widget, erhöhen Sie den z-index. Der Höchstwert ist 2147483647. Siehe So beheben Sie einen Banner, der hinter Theme-Elementen verschwindet (Neue Version).

Eigenes Styling (CSS)

Für Änderungen, die die Style-Einstellungen nicht abdecken, nutzen Sie Custom styling beziehungsweise CSS Rules im selben Reiter. Die Regeln wirken innerhalb der Web Component pandectes-cmp.

Siehe Eigenes Styling mit CSS.

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

Mobil und Desktop

Viele Style-Felder können auf Mobilgeräten abweichen. Nutzen Sie Mobile same as desktop oder Mobile different from desktop. Siehe So nutzen Sie unterschiedliche Banner-Layouts auf Mobil und Desktop (Neue Version).