Dit artikel is ook beschikbaar in:

Aangepaste styling met CSS

Overzicht

De meeste huisstijlaanpassingen doe je makkelijker in de app dan met CSS. Op het tabblad Style kun je logo's, knopvarianten, kleuren, lettertypen, oppervlakken (padding, afronding, schaduw, z-index) en animaties instellen zonder code te schrijven. Zie How to customize banner style, colors, logos, and buttons (New Version).

Gebruik Custom styling alleen als je met de Style-opties niet kunt bereiken wat je nodig hebt (bijvoorbeeld een specifieke knopindeling, randafwerking of positie van de widget).

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

Stappen voor Legacy: Custom styling with CSS (Legacy Banner).

Custom styling is beschikbaar voor betaalde abonnementen (bijvoorbeeld Plus en hoger). Het is niet inbegrepen in het gratis Basic-abonnement. Upgrade via de abonnementskiezer in de app als de CSS-editor vergrendeld is.

Waar vind je Custom styling

Open Shopify Admin > Apps > Pandectes GDPR Compliance.
Ga naar Cookie banner.
Controleer of het label New version zichtbaar is op de Banner-pagina.
Open het tabblad Style.
Scrol naar Custom styling (naast de sectietitel zie je mogelijk Learn more, dat naar dit artikel verwijst).
Kies onder CSS Rules voor Desktop en/of Mobile als je per schermformaat andere regels nodig hebt.
Plak je CSS en klik op Save zodra de balk met niet-opgeslagen wijzigingen verschijnt.

Test op de webshop in een privévenster. Als je Enable for admins gebruikt, zien alleen ingelogde medewerkers de banner terwijl je test.

Voeg banner-CSS toe in Custom styling in de Pandectes-app. CSS in je Shopify-thema wijzigt de nieuwe banner meestal niet. Gebruik hiervoor de editor op deze pagina.

Gebruik eerst de app-instellingen voordat je CSS gebruikt

Doel	Gebruik eerst het tabblad Style
Kleuren en lichte/donkere modus	Colors
Uiterlijk van knoppen (gevuld / omlijnd, afronding)	Buttons
Breedte, positie en dialoogtype van de banner	Tabblad Layout
Lettertype en grootte	Fonts
Schaduw, padding, rand, boven het thema weergeven	Surfaces (inclusief z-index)
Beweging bij openen/sluiten	Animations
Positie van widget en melding	Layout (melding / voorkeuren / toestemmingswidget)

Als de banner achter een sticky header of chat-app zit, verhoog dan Surfaces > z-index voordat je CSS toevoegt. Zie How to fix the banner hiding behind theme elements (New Version).

Voorbeeld-CSS

Plak regels in CSS Rules en klik op Save. Pas kleuren en groottes aan je merk aan.

Accentrand op de cookiemelding:

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

Kleuren van de knoppen Accept en Decline:

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

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

De toestemmingswidget iets hoger op de pagina plaatsen:

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

Voor geavanceerde kleuraanpassingen ondersteunt de editor ook CSS-variabelen (bijvoorbeeld --ai-bg, --ai-text) op de dialogen voor melding en voorkeuren. Je supportteam of ontwikkelaar kan je helpen als je al variabelen in de app gebruikt.

Tips

Begin met één kleine wijziging, sla op en controleer de webshop.
Gebruik Desktop- en Mobile-CSS Rules als je andere styling nodig hebt op kleine schermen.
Als een wijziging niet zichtbaar is, wacht dan een minuut en ververs de pagina.

Aangepaste CSS van de Legacy Banner wordt niet overgenomen bij het upgraden. Voeg de regels na de migratie opnieuw toe. Zie How to switch to the new banner or switch back to the previous version.

Gerelateerde artikelen

Bijgewerkt op: 19/10/2026

Was dit artikel nuttig?

Dankuwel!