Eigenes Styling mit CSS (Neue Version)

Überblick

Das meiste rund um Ihr Branding lässt sich in der App leichter einstellen als per CSS. Im Reiter Style legen Sie Logos, Schaltflächenvarianten, Farben, Schriften, Flächen (Innenabstand, Rundung, Schatten, z-index) und Animationen fest, ganz ohne Code. Siehe So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (Neue Version).

Nutzen Sie Custom styling nur dann, wenn die Style-Einstellungen nicht ausreichen, etwa für eine bestimmte Anordnung der Schaltflächen, eine besondere Rahmengestaltung oder die Position des Widgets.

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: Eigenes Styling mit CSS (Legacy-Banner).

Custom styling steht in den kostenpflichtigen Tarifen zur Verfügung (zum Beispiel ab Plus). Im kostenlosen Basic-Tarif ist es nicht enthalten. Ist der CSS-Editor gesperrt, wechseln Sie über die Tarifauswahl in der App.

Wo Sie Custom styling öffnen

Öffnen Sie Shopify Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Prüfen Sie, ob auf der Banner-Seite der Hinweis New version steht.
Öffnen Sie den Reiter Style.
Scrollen Sie zu Custom styling (neben dem Titel des Bereichs sehen Sie möglicherweise Learn more, das auf diesen Artikel verweist).
Wählen Sie unter CSS Rules Desktop und/oder Mobile, wenn Sie je Ansicht unterschiedliche Regeln benötigen.
Fügen Sie Ihr CSS ein und klicken Sie auf Save, sobald die Leiste für ungespeicherte Änderungen erscheint.

Testen Sie in Ihrem Shop in einem privaten Fenster. Nutzen Sie Enable for admins, sehen während des Tests nur angemeldete Mitarbeitende den Banner.

Fügen Sie Banner-CSS unter Custom styling in der Pandectes-App ein. CSS in Ihrem Shopify-Theme verändert den neuen Banner in der Regel nicht, nutzen Sie stattdessen den Editor auf dieser Seite.

Erst die App-Einstellungen, dann CSS

Ziel	Zuerst im Reiter Style
Farben sowie heller und dunkler Modus	Colors
Aussehen der Schaltflächen (gefüllt, umrandet, Rundung)	Buttons
Breite, Position und Dialogtyp des Banners	Reiter Layout
Schriftart und -größe	Fonts
Schatten, Innenabstand, Rahmen, Position über dem Theme	Surfaces (einschließlich z-index)
Bewegung beim Öffnen und Schließen	Animations
Position von Widget und Hinweis	Layout (Notice, Preferences, Consent Widget)

Liegt der Banner hinter einem fixierten Header oder einer Chat-App, erhöhen Sie zuerst Surfaces > z-index, bevor Sie CSS ergänzen. Siehe So beheben Sie einen Banner, der hinter Theme-Elementen verschwindet (Neue Version).

CSS-Beispiele

Fügen Sie die Regeln unter CSS Rules ein und klicken Sie auf Save. Passen Sie Farben und Größen an Ihre Marke an.

Akzentrahmen am Cookie-Hinweis:

dialog.dialog.notice {
  border-left: 4px solid #00ffbf;
}

Farben der Schaltflächen Accept und Decline:

button.filled.allow.primary {
  background: #111111;
}

button.filled.deny.primary {
  background: #666666;
}

Das Consent Widget etwas höher setzen:

button.widget.bottom.left {
  bottom: 24px;
}

Für feinere Farbanpassungen unterstützt der Editor zusätzlich CSS-Variablen (zum Beispiel --ai-bg, --ai-text) in den Dialogen Notice und Preferences. Unser Supportteam oder Ihre Entwicklung hilft Ihnen gerne, wenn Sie bereits mit Variablen arbeiten.

Tipps

Beginnen Sie mit einer kleinen Änderung, speichern Sie und prüfen Sie Ihren Shop.
Nutzen Sie die CSS Rules für Desktop und Mobile, wenn Sie auf kleinen Bildschirmen anders gestalten möchten.
Erscheint eine Änderung nicht, warten Sie eine Minute und laden Sie die Seite neu.