Stijl, kleuren, logo's en knoppen van de banner aanpassen (nieuwe versie)
Overzicht
Layout (positie en type dialoog) wordt apart behandeld. Als je overstapt vanaf de Legacy Banner, zie Migratiegids: je Legacy-look opnieuw opbouwen in de New Version.
Op het tabblad Style bepaal je hoe de banner, het Preferences-venster en de toestemmingswidget eruitzien. Je kunt logo's uploaden, knopstijlen kiezen, kleuren instellen (ook voor licht en donker), oppervlakken en lettertypen aanpassen, en eigen CSS toevoegen.
Stijl verandert niet wanneer cookies zijn toegestaan. Toestemmingsregels blijven in All settings > Consent model & regions.
Legacy-stappen: Migratiegids: je Legacy-look opnieuw opbouwen in de New Version.
Voordat je begint
- Controleer of de pagina Banner het badge New version toont.
- Gebruik Enable for admins als je op de live winkel wilt testen zonder de banner aan bezoekers te tonen. Zie Hoe je de banner in admin-only mode inschakelt, uitschakelt of test (New Version).
- Gebruik de preview in de app (Desktop / Mobile, Light / Dark) terwijl je bewerkt.
Open het tabblad Style
- Open Shopify Admin > Apps > Pandectes GDPR Compliance.
- Ga naar Cookie banner.
- Open het tabblad Style.
- Sla op 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 koptekst van de cookie notice en het Preferences-venster (tenzij Hide header is ingeschakeld op het tabblad Content).
- Widget logo: verschijnt op de toestemmingswidget.
Upload een PNG- of JPG-bestand, of kies een logo uit de galerij. Na het opslaan kan het even duren voordat wijzigingen in de storefront zichtbaar zijn.
Knoppen
Knopinstellingen gelden voor primaire acties (Accept / Deny all) en secundaire acties (Preferences / Save).
Gangbare opties:
- Gevulde of omlijnde (ghost) varianten
- Grootte en hoekradius
- Rand
- Vetgedrukte knopteksten (sectie fonts)
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 de voorkeuren. Zie Hoe je een banner maakt die voldoet aan de bannervereisten van Google (New Version).
Kleuren
Kies een kleurmodus (bijvoorbeeld licht of donker), een preset of je eigen kleuren.
- Base, primary, secondary, and accent-kleuren bepalen achtergronden, tekst en knoppen.
- Auto calculate / auto-adjust kan een kleurenpalet afleiden uit je Shopify-thema, zodat je niet elke hexwaarde handmatig hoeft in te voeren.
- Bekijk de achtergronden van Light en Dark in de live preview, zodat de banner leesbaar blijft voor bezoekers die de donkere modus gebruiken.
Oppervlakken, lettertypen en animaties
- Surfaces: padding, hoekradius, zweven (zwevend venster), rand, schaduw, en Stacking Depth (z-index) (hoe de banner zich boven andere elementen van het thema plaatst).
- Fonts: familie en grootte. Laat leeg om het lettertype van de winkel te volgen.
- Animations: beweging in- of uitschakelen en de duur instellen. Layout bepaalt nog steeds het animatietype (fade, slide, zoom, grow).
Als de banner achter een vaste header of chatwidget staat, verhoog dan Stacking Depth (z-index) (of klik op Set max). De maximale waarde is 2147483647. Zie Hoe je oplost dat de banner achter elementen van het thema verborgen blijft (New Version).
Eigen opmaak (CSS)
Voor wijzigingen die de Style-instellingen niet kunnen, gebruik je Custom styling / CSS Rules op hetzelfde tabblad. Regels gelden binnen de pandectes-cmp-webcomponent.
Zie Eigen opmaak met CSS.
Mobiel versus desktop
Veel Style-velden kunnen op mobiel anders zijn. Gebruik Mobile same as desktop of Mobile different from desktop. Zie Hoe je verschillende bannerlay-outs op mobiel en desktop gebruikt (New Version).
Gerelateerde artikelen
- De lay-out van de banner aanpassen (New Version)
- Hoe je bannerteksten en links bewerkt (New Version)
- Hoe je de Consent widget inschakelt en aanpast (New Version)
- Eigen opmaak met CSS
Bijgewerkt op: 27/10/2026
Dankuwel!