Eigenes Styling mit CSS (Legacy-Banner)

Überblick

Beim Legacy-Banner finden Sie die meisten Gestaltungsoptionen unter Cookie banner > Style: Layout (Position, Breite, Farbschema), Farben, Logo, Schriften, z-index und Animationen. Nutzen Sie eigenes CSS nur dann, wenn diese Felder nicht ausreichen.

Eigenes CSS beziehungsweise erweitertes Styling steht in den kostenpflichtigen Tarifen zur Verfügung (zum Beispiel ab Plus), nicht im kostenlosen Basic-Tarif.

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

Schritte für den neuen Banner: Eigenes Styling mit CSS.

Wo Sie CSS einfügen (Legacy-Banner)

Öffnen Sie Shopify Admin > Apps > Pandectes GDPR Compliance.
Gehen Sie zu Cookie banner.
Prüfen Sie, dass der Hinweis New version nicht erscheint (die Legacy-Oberfläche nutzt die Reiter Behavior, Style und Content).
Öffnen Sie den Reiter Style.
Nutzen Sie Layout, Colors und Advanced styling für Schriften, z-index und Animationen.
Ergänzen Sie eigene Regeln im Bereich für eigenes CSS im Reiter Style (in den kostenpflichtigen Tarifen Teil von Advanced styling).
Speichern Sie und testen Sie in Ihrem Shop in einem privaten Fenster.

Wie der Legacy-Banner im DOM erscheint

Übliche Wurzelelemente im Shop:

#pandectes-banner
CookieConsent-Klassen: .cc-window, .cc-message, .cc-compliance, .cc-btn

Das CSS Ihres Themes kann den Legacy-Banner beeinflussen, denn er liegt anders als der neue Banner nicht in einem Shadow Root. Nutzen Sie dennoch bevorzugt das CSS-Feld unter Style in Pandectes, damit Ihre Regeln zusammen mit Ihren Pandectes-Einstellungen bestehen bleiben.

Erst die App-Einstellungen, dann CSS

Ziel	Ort in der Legacy-Oberfläche
Position als Bar, schwebend oder Popup	Style > Layout > Position
Breite	Style > Layout > Width
Farben	Style > Colors
Logo	Style > Banner logo
Schriften	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Beschriftungen der Schaltflächen	Reiter Content

Beispiel-Selektoren (in Ihrem Shop prüfen)

Beziehen Sie Ihre Regeln nach Möglichkeit auf das Wurzelelement des Banners:

Das Banner-Fenster

#pandectes-banner .cc-window {
  border-top: 3px solid #00ffbf;
}

Der Nachrichtentext

#pandectes-banner .cc-message {
  font-size: 14px;
}

Die Schaltflächen Accept und Decline

#pandectes-banner .cc-btn.cc-allow {
  background-color: #111111;
}

#pandectes-banner .cc-btn.cc-deny {
  background-color: #666666;
}

Das Präferenzfenster

Öffnen Sie das Präferenzfenster in Ihrem Shop und prüfen Sie die Klassennamen, sie unterscheiden sich je Banner-Typ (Preferences, Informative usw.). Siehe Cookie-Banner-Modi (Legacy-Version).

Den Live-Banner untersuchen

Öffnen Sie Ihren Shop mit sichtbarem Banner.
Klicken Sie mit der rechten Maustaste auf den Banner und wählen Sie Untersuchen.
Prüfen Sie, ob #pandectes-banner oder .cc-window im DOM steht.
Kopieren Sie die Klassennamen der Elemente, die Sie gestalten möchten. Übernehmen Sie keine Selektoren aus der Anleitung zum neuen Banner (dialog.notice, pandectes-cmp).

Beim Umstieg auf den neuen Banner

Eigenes CSS aus der Legacy-Version wird nicht automatisch übernommen. Legen Sie Ihre Regeln nach dem Upgrade unter Style > Custom styling im neuen Banner erneut an. Siehe: