Dieser Artikel ist auch verfügbar in:

Eigenes Styling mit CSS (Neue Version)

Übersicht

Die meisten Anpassungen des Brandings gelingen einfacher in der App als in CSS. Auf dem Tab Style können Sie Logos, Button-Varianten, Farben, Schriften, Oberflächen (Innenabstand, Radius, Schatten, z-index) und Animationen ohne Code festlegen. Siehe So passen Sie Stil, Farben, Logos und Schaltflächen des Banners an (neue Version).

Verwenden Sie Custom styling nur, wenn die Style-Optionen nicht ausreichen, etwa für ein bestimmtes Button-Layout, eine Rahmengestaltung oder die Position des Widgets.

Neuer Banner. Für Stores mit dem Badge New version auf Cookie banner. Im Legacy-Banner finden Sie Hinweise unter So wechseln Sie zum neuen Banner oder zurück zur vorherigen Version.

Legacy-Schritte: Individuelles Styling mit CSS (Legacy-Banner).

Custom styling is available on paid plans (z. B. Plus und höher). Im kostenlosen Tarif Basic ist es nicht enthalten. Falls der CSS-Editor gesperrt ist, upgraden Sie über den Tarifwähler in der App.

Wo Sie das individuelle Styling öffnen

Öffnen Sie Shopify-Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Vergewissern Sie sich, dass das Badge New version auf der Seite Banner sichtbar ist.
Öffnen Sie den Tab Style.
Scrollen Sie zu Custom styling (neben dem Abschnittstitel sehen Sie möglicherweise Learn more, das auf diesen Artikel verlinkt).
Verwenden Sie unter CSS Rules die Desktop- und Mobile-Symbole, wenn Sie je nach Ansicht unterschiedliche Regeln benötigen.
Fügen Sie Ihr CSS ein und klicken Sie dann auf Save, sobald die Leiste mit ungespeicherten Änderungen erscheint.

CSS Rules field in the Custom styling card on the Style tab

Testen Sie auf dem Storefront in einem privaten Fenster. Wenn Sie Enable for admins verwenden, sehen während Ihrer Tests nur angemeldete Mitarbeiter den Banner.

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

Zuerst App-Einstellungen, dann CSS

Ziel	Zuerst den Tab Style verwenden
Farben und heller/dunkler Modus	Colors
Aussehen der Schaltflächen (gefüllt / umrandet, Radius)	Buttons
Breite des Banners, Position, Dialogtyp	Tab Layout
Schriftfamilie und Schriftgröße	Fonts
Schatten, Innenabstand, Rahmen, Stapelung über dem Theme	Surfaces (einschließlich Stacking Depth (z-index))
Bewegung beim Öffnen und Schließen	Animations
Position von Widget und Hinweis	Layout (Hinweis / Einstellungen / Einwilligungs-Widget)

Liegt der Banner hinter einem fixierten Header oder einer Chat-App, erhöhen Sie zuerst Surfaces > Stacking Depth (z-index), bevor Sie CSS hinzufügen. Siehe So beheben Sie, dass der Banner hinter Theme-Elementen verschwindet (neue Version).

Beispiel-CSS

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

Accent border on the cookie notice:

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

Accept and Decline button colors:

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

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

Verschieben Sie das Einwilligungs-Widget etwas weiter nach oben auf der Seite:

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

Für fortgeschrittene Farbanpassungen unterstützt der Editor außerdem CSS variables (z. B. --ai-bg, --ai-text) in den Dialogen für Hinweis und Einstellungen. Ihr Support-Team oder Entwickler kann helfen, wenn Sie bereits Variablen in der App verwenden.

Tipps

Beginnen Sie mit einer kleinen Änderung, speichern Sie und prüfen Sie den Storefront.
Verwenden Sie die Desktop- und Mobile-Symbole oberhalb von CSS Rules, wenn Sie auf kleinen Bildschirmen anders gestalten möchten.
Wenn eine Änderung nicht angezeigt wird, warten Sie eine Minute und laden Sie die Seite neu.