Stijl, kleuren, logo's en knoppen van de banner aanpassen (nieuwe versie)
Overzicht
De lay-out (positie en dialoogtype) wordt apart behandeld. Als je overstapt van de Legacy-banner, zie Migration Guide: Recreating your Legacy Look in New Version.
Het tabblad Style bepaalt hoe de banner, de voorkeurendialoog en de toestemmingswidget eruitzien. Je kunt logo's uploaden, knopstijlen kiezen, kleuren instellen (ook licht en donker), oppervlakken en lettertypen aanpassen en aangepaste CSS toevoegen.
Style verandert niet wanneer cookies zijn toegestaan. De toestemmingsregels blijven in All settings > Consent model & regions.
Stappen voor Legacy: Migration Guide: Recreating your Legacy Look in New Version.
Voordat je begint
- Controleer of de Banner-pagina het label New version toont.
- Gebruik Enable for admins als je op de live winkel wilt testen zonder de banner aan bezoekers te tonen. Zie How to enable, disable, or test the banner in admin-only mode (New Version).
- Gebruik de voorvertoning in de app (Desktop / Mobile, Light / Dark) terwijl je bewerkt.
Het tabblad Style openen
- Open Shopify Admin > Apps > Pandectes GDPR Compliance.
- Ga naar Cookie banner.
- Open het tabblad Style.
- Klik op Save zodra de balk met niet-opgeslagen wijzigingen verschijnt.
Logo's
Je kunt een logo instellen voor de hoofdbanner en een apart logo voor de toestemmingswidget.
- Banner logo: verschijnt in de header van de cookiemelding en de voorkeuren (tenzij Hide header is ingeschakeld bij Layout).
- Widget logo: verschijnt op de toestemmingswidget.
Upload een PNG of JPG, of kies een logo uit de galerij. Na het opslaan kan het even duren voordat wijzigingen op de webshop zichtbaar zijn.
Knoppen
De knopinstellingen gelden voor primaire acties (Accept / Deny all) en secundaire acties (Preferences / Save).
Typische opties:
- Gevulde of omlijnde (ghost) varianten
- Grootte en hoekafronding
- Rand
- Vetgedrukte knoplabels (sectie lettertypen)
Gebruik een gevulde Accept-knop en een omlijnde Decline-knop als je wilt dat Accept opvalt. De bannervereisten van Google vragen nog steeds om een duidelijke Decline-optie en toegang tot voorkeuren. Zie How to create a banner that meets Google’s banner requirements (New Version).
Kleuren
Kies een kleurmodus (bijvoorbeeld licht of donker), een preset of je eigen kleuren.
- Base, primary, secondary en accent-kleuren bepalen achtergronden, tekst en knoppen.
- Auto calculate / automatisch aanpassen kan een palet afleiden van je Shopify-thema, zodat je niet elke hex-waarde zelf hoeft in te voeren.
- Bekijk Light- en Dark-achtergronden in de live voorvertoning, zodat de banner leesbaar blijft voor bezoekers die de donkere modus gebruiken.
Oppervlakken, lettertypen en animaties
- Surfaces: padding, hoekafronding, float (zwevend venster), rand, schaduw en z-index (hoe de banner boven andere thema-elementen wordt gestapeld).
- Fonts: lettertype en grootte. Laat leeg om het lettertype van de winkel te volgen.
- Animations: beweging in- of uitschakelen en de duur instellen. Het type animatie (fade, slide, zoom, grow) kies je nog steeds bij Layout.
Als de banner achter een sticky header of chatwidget zit, verhoog dan de z-index. De maximale waarde is 2147483647. Zie How to fix the banner hiding behind theme elements (New Version).
Aangepaste styling (CSS)
Gebruik voor wijzigingen die met de Style-opties niet mogelijk zijn Custom styling / CSS Rules op hetzelfde tabblad. Regels worden toegepast binnen de webcomponent pandectes-cmp.
Mobiel versus desktop
Veel Style-velden kunnen op mobiel verschillen. Gebruik Mobile same as desktop of Mobile different from desktop. Zie How to use different banner layouts on mobile and desktop (New Version).
Gerelateerde artikelen
- Customizing the layout of the banner (New Version)
- How to edit banner texts and links (New Version)
- How to enable and customize the Consent widget (New Version)
- Custom styling with CSS
Bijgewerkt op: 19/10/2026
Dankuwel!