Dit artikel is ook beschikbaar in:

Aangepaste styling met CSS (Legacy-banner)

Overzicht

Bij de Legacy-banner staan de meeste uiterlijke opties op Cookie banner > Style: lay-out (positie, breedte, thema), kleuren, logo, lettertypen, z-index en animaties. Gebruik aangepaste CSS alleen wanneer die velden niet genoeg zijn.

Aangepaste CSS / geavanceerde styling is beschikbaar voor betaalde abonnementen (bijvoorbeeld Plus en hoger), niet in het gratis Basic-abonnement.

Legacy-banner. Voor winkels zonder het label New version bij Cookie banner. Voor de nieuwe banner, zie How to switch to the new banner or switch back to the previous version.

Stappen voor de nieuwe banner: Custom styling with CSS.

Waar voeg je CSS toe (Legacy-banner)

Open Shopify Admin > Apps > Pandectes GDPR Compliance.
Ga naar Cookie banner.
Controleer dat je het label New version niet ziet (de Legacy-UI gebruikt de tabbladen Behavior, Style en Content).
Open het tabblad Style.
Gebruik Layout, Colors en Advanced styling voor lettertypen, z-index en animaties.
Voeg aangepaste regels toe in het gebied custom CSS op het tabblad Style (inbegrepen bij Advanced styling in betaalde abonnementen).
Klik op Save en test op de webshop in een privévenster.

Hoe de Legacy-banner in de DOM verschijnt

Typische roots op de webshop:

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

Thema-CSS kan de Legacy-banner beïnvloeden, omdat die niet in een shadow root zit zoals de nieuwe banner. Gebruik toch bij voorkeur het CSS-veld bij Style in Pandectes, zodat de regels meegaan met je Pandectes-instellingen.

Gebruik eerst de app-instellingen voordat je CSS gebruikt

Doel	Locatie in Legacy
Positie: balk, zwevend of popup	Style > Layout > Position
Breedte	Style > Layout > Width
Kleuren	Style > Colors
Logo	Style > Banner logo
Lettertypen	Style > Advanced styling
z-index	Style > Advanced styling > z-index
Knoplabels	Tabblad Content

Voorbeeldselectors (controleer op je winkel)

Beperk regels waar mogelijk tot de banner-root:

Bannervenster

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

Berichttekst

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

Knoppen Accept / Decline

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

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

Open het voorkeurenpaneel in je winkel en inspecteer de klassenamen. Die verschillen per bannertype (Preferences, Informative, enz.). Zie Cookie Banner Modes (Legacy Version).

De live banner inspecteren

Open de webshop terwijl de banner zichtbaar is.
Klik met de rechtermuisknop op de banner en kies Inspect.
Controleer #pandectes-banner of .cc-window in de DOM.
Kopieer klassenamen van de knooppunten die je wilt stijlen. Plak geen selectors uit de handleiding voor de nieuwe banner (dialog.notice, pandectes-cmp).

Upgraden naar de nieuwe banner

Aangepaste CSS van Legacy wordt niet automatisch gemigreerd. Maak na de upgrade de regels opnieuw aan onder Style > Custom styling in de nieuwe banner. Zie:

Gerelateerde artikelen

Bijgewerkt op: 19/10/2026

Was dit artikel nuttig?

Dankuwel!