🎨 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. ✨
Bijgewerkt op: 10/09/2026
Dankuwel!