> ## 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). # 🎨 Aangepaste CSS voor Popups instellen > ℹ️ **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. Wilt u dat uw popups perfect overeenkomen met uw winkel branding? 🎨 Terwijl Hoppy Popups omvat uitgebreide ontwerp aanpassing opties, **Aangepaste CSS** geeft u volledige controle over geavanceerde styling aanpassingen die verder gaan dan de standaard instellingen. Of u nu typografie verfijnt, de afstand aanpast, unieke visuele effecten creëert of themaspecifieke stylingconflicten oplost, Met Custom CSS kunt u uw popups precies aanpassen zoals u wilt. --- # **⚠️ Voordat u begint** Voordat u Aangepaste CSS gebruikt: * Zorg ervoor dat uw popup al is aangemaakt en opgeslagen. * Heb een basiskennis van CSS of toegang tot een ontwikkelaar. * Begrijp dat Custom CSS standaard Design-instellingen kan overschrijven. 💡 Standaard styling opties zoals kleuren, lettertypen en afstand zijn al beschikbaar binnen het tabblad Ontwerp. Custom CSS is bedoeld voor meer geavanceerde styling eisen. --- # **🛠️ Stap 1 Open uw popup-instellingen** Open de **Hoppy Popups** app van Shopify Admin. Dan: ➡️ Open een bestaande popup. ➡️ Of maak een nieuwe popup als je dat nog niet gedaan hebt. Navigeer naar de **Ontwerp** tab. Scroll naar beneden totdat u de **Aangepaste CSS** Section. --- # **🎨 Stap 2 Open de aangepaste CSS sectie** Binnen de **Aangepaste CSS** sectie vindt u: * Een CSS-editor * Een **Toepassen** knop * A **Reset** knop * Een starter CSS-sjabloon De sjabloon bevat veelgebruikte popup selectoren, waardoor het gemakkelijk is om te beginnen met het aanpassen van uw popup zonder dat het nodig is om klassenamen handmatig te identificeren. --- # **✍️ Stap 3 Toevoegen van uw aangepaste CSS** De editor biedt verschillende kant-en-klare selectoren voor styling popup elementen. ### **Beschikbare selectoren** Selectie Omschrijving `.futureblink-popup` Volledige popup container `.futureblink-popup .title` Popup-titel `.futureblink-popup .description` Popup beschrijving tekst `.futureblink-popup .cta-button` Call-to-action-knop `.futureblink-popup .close-btn` Knop sluiten --- ### **Mobiele selecties** Voor mobiele-specifieke styling, gebruik de `.mobile` variatie. Selectie Omschrijving `.futureblink-popup.mobile` Mobiele popup container `.futureblink-popup.mobile .title` Mobiel titel `.futureblink-popup.mobile .description` Mobiele beschrijving `.futureblink-popup.mobile .cta-button` Mobiele CTA-knop `.futureblink-popup.mobile .close-btn` Mobiele sluitknop --- ### **Voorbeeld CSS** Om de popup titel en CTA-knop aan te passen: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 U kunt ook extra selecties, animaties, media-queries en andere geldige CSS-regels toevoegen indien nodig. --- # **📱 Stap 4 toevoegen Mobile-Specific Styling** Gebruik de `.mobile` selectoren. Voorbeeld: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` De app wraps automatisch `.mobile` selectoren in een mobiele mediaquery wanneer ze op uw storefront worden weergegeven. Dit betekent dat u niet handmatig mobiele breekpunten hoeft aan te maken voor deze selectoren. --- # **✅ Stap 5 Toepassen van uw CSS** Zodra uw CSS is toegevoegd: ➡️ Klik **Toepassen**. De preview updates automatisch zodat u direct uw styling wijzigingen kunt bekijken. ⚠️ Het gewoon plakken van CSS in de editor activeert het niet. U moet op **Toepassen** voordat de stijlen actief worden. Als u uw aangepaste styling wilt verwijderen: ➡️ Klik **Reset**. Dit herstelt de standaard sjabloon en schakelt de aangepaste CSS. --- # **👀 Stap 6 Bekijk het voorbeeld** Na het toepassen van uw CSS: ➡️ Bekijk het voorbeeld van het bureaublad. ➡️ Bekijk de Mobile preview. Controleer of: * Tekst wordt correct weergegeven. * Knoppen blijven op één lijn. * Spatiëring lijkt consistent. * De visuele effecten gedragen zich zoals verwacht. Indien nodig: ➡️ Update de CSS. ➡️ Klik **Toepassen** Alweer. Het voorbeeld ververst automatisch na elke update. --- # **💾 Stap 7: Opslaan en publiceren** Zodra je tevreden bent met het ontwerp: ➡️ Klik **Opslaan**. ➡️ Klik **Publiceren**. ⚠️ Alleen opslaan werkt uw storefront niet bij. De popup moet ook worden gepubliceerd voordat klanten de wijzigingen kunnen zien. --- # **⚠️ Belangrijke opmerkingen** ### **Aangepaste CSS overschrijft ontwerpinstellingen** Custom CSS heeft voorrang op de meeste standaard Design instellingen. Als een ontwerpinstelling lijkt te worden genegeerd, wordt het waarschijnlijk overschreven door uw CSS. --- ### **Mobiele bediening is automatisch** De app converteert automatisch `.mobile` selectoren in responsieve mobiele stijlen. Dit maakt het gemakkelijk om afzonderlijke desktop en mobiele ontwerpen te behouden zonder het schrijven van aangepaste media vragen. --- ### **Scoped Styling** Aangepaste CSS wordt automatisch gecontroleerd op de specifieke popup die wordt bewerkt. Dit voorkomt styling conflicten met: * Andere popups * Themaelementen * Andere inhoud voor opslag --- ### **Optie resetten** Klikken **Reset** verwijdert alleen de aangepaste CSS. Het heeft geen invloed op: * Popup-instellingen * Ontwerpinstellingen * Sjablonen * Inhoudconfiguratie --- ### **CSS-validatie** De editor valideert geen CSS syntax. Als een stijl niet correct verschijnt: ➡️ Controleer de namen van de selectie. ➡️ Controleer beugels en puntkomma's. ➡️ Bekijk de CSS voor syntax fouten. --- # **❓ Problemen oplossen** Als uw stijlen niet correct verschijnen: ➡️ Bevestig dat **Toepassen** is geklikt. ➡️ Controleer de popup is **Opgeslagen** en **Gepubliceerd**. ➡️ Controleer of selectoren exact overeenkomen met het opgegeven sjabloon. ➡️ Test in een Incognito of Privé browservenster. ➡️ Vernieuw de storefront om gecachede stijlen te wissen. --- # **🎉 Eindresultaat** ✅ Uw popup kan worden aangepast buiten de standaard Design instellingen. ✅ Desktop en mobiele ervaringen kunnen onafhankelijk worden gestyled. ✅ Geavanceerde visuele effecten en merkspecifieke styling worden mogelijk. ✅ Aangepaste stijlen blijven geïsoleerd voor de geselecteerde popup. Custom CSS biedt de flexibiliteit om een meer gepolijste en merkconsistente popup-ervaring te creëren terwijl de eenvoud van de ingebouwde ontwerptools van de app behouden blijft. ✨