> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Cookie en stijl > ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam. De sectie Ontwerp & Styling geeft u volledige controle over hoe uw Cookie Toestemming banner over uw storefront verschijnt. Van sjablonen en positionering tot kleuren, typografie, pictogrammen en knoppenstyling, bijna elk visueel aspect van de banner kan worden aangepast aan uw winkel branding en het creΓ«ren van een meer professionele toestemming ervaring. # **⚠️ Voordat u begint** Om toegang te krijgen tot ontwerp- en stylinginstellingen: β†’ Openen **GDPR EU Cookie Banner** β†’ Openen **Bannerinstellingen** β†’ Navigeer naar de **Ontwerp** tab πŸ’‘ Een live preview updates automatisch als u wijzigingen aanbrengt, zodat u precies kunt zien hoe de banner zal verschijnen voordat u opslaat. --- ## **🎨 Sjablonen** Sjablonen bieden een snelle manier om een compleet bannerontwerp toe te passen zonder handmatig elke instelling te configureren. ### **Wat het doet** Geldt voor een vooraf gedefinieerde combinatie van: * Achtergrondkleuren * Tekstkleuren * Knopkleuren * Pictogramkleuren Hierdoor kunnen handelaren snel een gepolijste banner ontwerp lanceren. --- ### **Beschikbare sjablonen** Bijvoorbeeld: * Bos * Aqua * Waarschuwing * Paars * Blauw * Oceaan * Geel * Zwart * Marine --- ### **Aangepast sjabloon** De Custom template biedt een neutraal uitgangspunt voor handelaren die liever hun eigen ontwerp vanaf nul bouwen. πŸ’‘ Dit is vaak de beste optie bij het aanpassen van een bestaande merkstijl gids. --- ## **πŸ‘€ Zichtbaarheid** Zichtbaarheid regelt welke apparaten de Cookie Toestemming banner weergeven. ### **Beschikbare opties** #### **Bureaublad & mobiel** Toont de banner op alle apparaten. --- #### **Alleen bureaublad** Toont de banner alleen op desktop-apparaten. --- #### **Alleen mobiel** Toont de banner alleen op mobiele apparaten. Dit kan nuttig zijn bij het testen of het creΓ«ren van apparaatspecifieke ervaringen. --- ## **πŸ“ Positieinstellingen** Positie instellingen bepalen waar de banner verschijnt op desktop en mobiele apparaten. --- ### **πŸ’» Type bureaubladweergave** Bepaalt de algemene layout stijl gebruikt op desktop apparaten. #### **Volledige balk** Toont een spandoek over de breedte van het scherm. Vaak gebruikt voor traditionele cookie toestemming banners. --- #### **Zwevende kaart** Toont de banner als een kleinere drijvende kaart. Dit zorgt voor een compacter uiterlijk en vermindert de schermdekking. --- ### **πŸ“Œ Bureaubladpositie** De beschikbare posities zijn afhankelijk van het geselecteerde displaytype. #### **Volledige bar-posities** * Boven * Onder --- #### **Floatkaartposities** * Linksboven * Rechtsboven * Midden * Linksonder * Rechtsonder --- ### **πŸ“± Mobiele positie** Bepaalt waar de banner op mobiele apparaten verschijnt. Beschikbare opties zijn: * Boven * Midden * Onder πŸ’‘ Onderste plaatsing is vaak de voorkeur omdat het voelt minder opdringerig op kleinere schermen. --- ## **🎨 Kaartstijl** Card Styling regelt het uiterlijk van de banner container zelf. --- ### **πŸ–ΌοΈ Achtergrondkleur** Controleert de achtergrondkleur van de banner. Je kunt: * Selecteer een kleur visueel * Voer handmatig een Hex-code in Dit helpt bij het afstemmen van de banner met uw storefront branding. --- ### **β­• Hoekstraal** Bepaalt hoe afgerond de banner hoeken verschijnen. Lagere waarden maken scherpere hoeken terwijl hogere waarden een zachter uiterlijk creΓ«ren. --- ### **πŸ“ Randinstellingen** Pas de banner omtrek aan. #### **Randgrootte** Controleert de dikte van de rand. --- #### **Randkleur** Controleert de kleur van de rand. Een subtiele grens kan helpen de banner op te vallen zonder zich af te leiden. --- ## **✍️ Typografie** Typografie instellingen bepalen hoe tekst verschijnt in de hele Cookie Toestemming banner. --- ### **πŸ”  Lettertypefamilie** Bedient het lettertype dat in alle bannertekst wordt gebruikt. #### **Themalettertype gebruiken** Automatisch overeenkomt met de typografie gebruikt door uw Shopify thema. --- #### **Aangepaste lettertypen** Kies uit ondersteund systeem en Google Fonts. Bijvoorbeeld: * Roboto * Open Sans * Montserrat * Poppins Het gebruik van hetzelfde lettertype als uw storefront creΓ«ert vaak de meest naadloze ervaring. --- ### **πŸ“ Titelstijl** Pas de bannertitel aan. #### **Titelgrootte** Controleert de titellettergrootte. #### **Titelkleur** Controleert de kleur van de titeltekst. --- ### **πŸ“„ Beschrijving Styling** Pas de tekst in de banner aan. #### **Omschrijving Size** Controleert de lettergrootte. #### **Omschrijving kleur** Controleert de tekstkleur. --- ### **πŸ”— Privacybeleid Link** Pas het uiterlijk van de link Privacybeleid aan. #### **Linkgrootte** Controleert de lettergrootte. #### **Linkkleur** Controleert de kleur van de koppeling. Kies een kleur die blijft merkbaar terwijl nog steeds overeenkomt met het algemene ontwerp. --- ## **πŸ”˜ Knopontwerp** Deze instellingen regelen het uiterlijk van de toestemmingsknoppen. --- ### **🎨 Knopkleur** Bedient de achtergrondkleur van de knop. Dit is meestal een van de meest zichtbare ontwerpelementen op de banner. --- ### **πŸ”€ Knoptekststijl** Pas het uiterlijk van de knoptekst aan. #### **Tekstgrootte** Bedient de lettergrootte van de knop. #### **Tekstkleur** Bedient de kleur van de knoplettertype. --- ### **β­• Hoekstraal** Bepaalt hoe afgerond de knop hoeken verschijnen. Dit kan onafhankelijk van de banner container worden geconfigureerd. --- ## **🎯 Pictograminstellingen** Iconen maken de banner visueel herkenbaarer en boeiender. --- ### **πŸͺ Cookie Banner-pictogram tonen** Schakel het pictogram dat naast de banner-inhoud wordt weergegeven in of uitgeschakeld. Indien ingeschakeld wordt een pictogrambibliotheek beschikbaar. --- ### **πŸ–ΌοΈ Pictogramselectie** Kies uit een verscheidenheid van ingebouwde pictogrammen. Bijvoorbeeld: * Cookie * Schild * Vergrendelen * Beveiliging * Informatie * Instellingen * Kennisgeving * Waarschuwing * Checklist Verschillende pictogrammen kunnen helpen benadrukken privacy, veiligheid, naleving, of algemene informatie. --- ### **🎨 Pictogramkleuren** Pas de verschijning van banner pictogrammen. #### **Pictogramkleur sluiten** Bedient de kleur van de sluitknop. --- #### **Pijlpictogramkleur** Controleert de kleur van het pijlpictogram. Met behulp van complementaire kleuren helpt handhaven van een samenhangend ontwerp. --- ## **πŸ“ Tekstuitlijning** Bepaalt hoe inhoud in de banner is uitgelijnd. ### **Beschikbare opties** #### **Links** De inhoud naar links uitlijnen. --- #### **Midden** Centra voor alle inhoud binnen de banner. --- #### **Rechts** Ligt inhoud uit naar de rechterkant. πŸ’‘ Centrum uitlijning is vaak de meest evenwichtige optie op zowel desktop als mobiele apparaten. --- ## **⚠️ Belangrijke opmerkingen** ### **Sjablonen bestaande kleuren vervangen** Een nieuw sjabloon selecteren vervangt automatisch de huidige kleurinstellingen. Voor de beste resultaten: 1. Selecteer eerst een template 2. Pas dan elke aangepaste kleuraanpassingen toe --- ### **Positieopties Dynamisch wijzigen** De beschikbare desktopposities zijn afhankelijk van het geselecteerde displaytype. Als positiekeuzes onverwacht veranderen, controleer dan of Full Bar of Float Card is geselecteerd. --- ### **Pictogrammen moeten worden ingeschakeld** De pictogrambibliotheek verschijnt alleen wanneer: **Cookie Banner-pictogram tonen** is ingeschakeld. --- ### **Zichtbaarheid Bediening Apparaat gericht** Als de banner op het ene apparaat verschijnt maar niet op het andere, verifieer dan de geselecteerde instelling voor zichtbaarheid. --- ### **Live voorbeeldupdates Automatisch** Het voorbeeldpaneel verfrist als er wijzigingen worden gemaakt, waardoor u uw ontwerp te beoordelen voordat u opslaat. --- # **πŸš€ Eindresultaat** Eenmaal succesvol geconfigureerd: βœ… De Cookie Toestemming banner komt overeen met uw storefront branding βœ… Kleuren, typografie en knoppen voelen consistent met uw thema βœ… Banner plaatsing is geoptimaliseerd voor desktop en mobiel βœ… Pictogrammen en styling verbeteren visuele helderheid βœ… Bezoekers krijgen een meer gepolijste toestemming ervaring βœ… Compliance messaging voelt professioneel zonder de winkelervaring te verstoren Een goed ontworpen Cookie Toestemming banner helpt bij het handhaven van de naleving, terwijl het creΓ«ren van een meer betrouwbare en naadloze ervaring voor uw bezoekers. πŸͺ ---