Dit artikel is ook beschikbaar in:

Aangepaste styling met CSS

Overzicht

De meeste branding is in de app eenvoudiger dan in CSS. Op het tabblad Style kun je logo's, knopvarianten, kleuren, lettertypen, oppervlakken (padding, radius, schaduw, z-index) en animaties instellen zonder code te schrijven. Zie Hoe je de bannerstijl, kleuren, logo's en knoppen aanpast (nieuwe versie).

Gebruik Custom styling alleen als de Style-instellingen niet bereiken wat je nodig hebt (bijvoorbeeld een specifieke knoppenindeling, randbehandeling of positie van de widget).

Nieuwe banner. Voor winkels met de badge New version op Cookie banner. Zie voor de oude banner Hoe je naar de nieuwe banner overschakelt of terugschakelt naar de vorige versie.

Stappen voor de oude banner: Aangepaste styling met CSS (oude banner).

Custom styling is available on paid plans (bijvoorbeeld Plus en hoger). Het zit niet in het gratis Basic-abonnement. Upgrade via de abonnementskiezer in de app als de CSS-editor is vergrendeld.

Waar je aangepaste styling opent

Open Shopify Admin > Apps > Pandectes GDPR Compliance.
Ga naar Cookie banner.
Controleer of de badge New version zichtbaar is op de pagina Banner.
Open het tabblad Style.
Scrol naar Custom styling (je ziet mogelijk Learn more naast de sectietitel, die naar dit artikel linkt).
Gebruik onder CSS Rules de desktop- en mobiele iconen als je per schermformaat andere regels nodig hebt.
Plak je CSS en klik vervolgens op Save zodra de balk met niet-opgeslagen wijzigingen verschijnt.

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

Test op de storefront in een privévenster. Als je Enable for admins gebruikt, ziet alleen ingelogd personeel de banner terwijl je test.

Voeg bannerCSS toe in Custom styling in de Pandectes-app. CSS in je Shopify-thema verandert de nieuwe banner meestal niet. Gebruik in plaats daarvan de editor op deze pagina.

Gebruik eerst de app-instellingen voordat je CSS gebruikt

Doel	Gebruik eerst het tabblad Style
Kleuren en licht/donkere modus	Colors
Knopstijl (gevuld / omlijnd, afronding)	Buttons
Breedte, positie en type venster van de banner	Tabblad Layout
Lettertypefamilie en -grootte	Fonts
Schaduw, padding, rand, stapeling boven het thema	Surfaces (inclusief Stacking Depth (z-index))
Beweging bij openen en sluiten	Animations
Positie van melding en widget	Layout (melding / voorkeuren / toestemmingswidget)

Als de banner achter een sticky header of chatapp verborgen blijft, verhoog dan eerst Surfaces > Stacking Depth (z-index) voordat je CSS toevoegt. Zie Hoe je oplost dat de banner achter elementen van het thema verborgen blijft (nieuwe versie).

Voorbeeld-CSS

Plak de regels in CSS Rules en klik vervolgens op Save. Pas kleuren en formaten aan zodat ze bij je merk passen.

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;
}

Verplaats de toestemmingswidget iets hoger op de pagina:

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

Voor geavanceerde kleuraanpassingen ondersteunt de editor ook CSS variables (bijvoorbeeld --ai-bg, --ai-text) bij de meldings- en voorkeurenvensters. Je supportteam of ontwikkelaar kan helpen als je al variabelen in de app gebruikt.

Tips

Begin met één kleine wijziging, sla op en controleer de storefront.
Gebruik de desktop- en mobiele iconen boven CSS Rules wanneer je op kleine schermen andere stijlen nodig hebt.
Als een wijziging niet zichtbaar wordt, wacht je een minuut en ververs je de pagina.

Aangepaste CSS uit het Legacy Banner wordt niet overgenomen bij een upgrade. Voeg de regels hier opnieuw toe na de migratie. Zie Hoe je naar de nieuwe banner overschakelt of terugschakelt naar de vorige versie.

Gerelateerde artikelen

Bijgewerkt op: 27/10/2026

Was dit artikel nuttig?

Dankuwel!