> ## 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). # 🎨 Hoe stel je Custom CSS in voor Hoppy Announcement Bar > ℹ️ **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. Wil je volledige controle over het uiterlijk van je announcement bar? 🎨 Hoewel de ingebouwde ontwerpinstellingen de meeste aanpassingsbehoeften dekken, stelt de functie **Custom CSS** (aangepaste CSS) je in staat om het ontwerp verder te verfijnen dan de standaardopties. Dit is handig voor winkeliers die hun merkrichtlijnen precies willen laten overeenkomen, de afstand willen aanpassen, de typografie willen aanpassen of themaspecifieke stijlconflicten willen oplossen. --- # **⚠️ Voordat je begint** Voordat je Custom CSS gebruikt: * Zorg dat je announcement bar al is aangemaakt. * Zorg dat je basiskennis van CSS hebt of toegang hebt tot een ontwikkelaar. * Houd er rekening mee dat Custom CSS standaard ontwerpinstellingen kan overschrijven. ℹ️ De meeste winkeliers hebben nooit Custom CSS nodig. Gebruik het alleen wanneer de ingebouwde ontwerpopties het gewenste uiterlijk niet kunnen bereiken. --- # **🛠️ Stap 1 — Open het tabblad Design** Open de **Hoppy Announcement Bar**-app en navigeer naar de announcement bar die je wilt aanpassen. Vervolgens: ➡️ Klik op het tabblad **Design** (Ontwerp). Scroll naar beneden totdat je de sectie **Custom CSS** vindt. --- # **🎨 Stap 2 — Schakel Custom CSS in** In de sectie **Custom CSS**: ➡️ Klik op **Apply** (Toepassen). Zodra deze is ingeschakeld, verschijnt er een CSS-editor met een vooraf geconfigureerd CSS-skelet. Dit skelet bevat alle ondersteunde selectors, waardoor het eenvoudiger is om verschillende elementen van de announcement bar te targeten zonder de klassenamen handmatig te hoeven identificeren. --- # **✍️ Stap 3 — Voeg je aangepaste CSS toe** De editor biedt kant-en-klare selectors voor de belangrijkste elementen van de announcement bar. ### **Beschikbare selectors** | Selector | Beschrijving | | ----- | ----- | | `.futureblink-announcement-bar` | Gehele container van de announcement bar | | `.futureblink-announcement-bar .title` | Hoofdtiteltekst | | `.futureblink-announcement-bar .subheading` | Subtiteltekst | | `.futureblink-announcement-bar .cta-button` | Call-to-action-knop | | `.futureblink-announcement-bar .close-btn` | Sluiticoon | | `.futureblink-announcement-bar .arrow` | Navigatiepijlen | | `.futureblink-announcement-bar .button-prev` | Vorige slide-knop | | `.futureblink-announcement-bar .button-next` | Volgende slide-knop | ### **Mobielspecifieke selectors** Om specifiek mobiele apparaten te targeten, gebruik je de `.mobile`-variant. Voorbeelden: * `.futureblink-announcement-bar.mobile .title` * `.futureblink-announcement-bar.mobile .cta-button` * `.futureblink-announcement-bar.mobile .close-btn` --- ### **Voorbeeld-CSS** Om de titel in hoofdletters weer te geven met extra tussenruimte: `.futureblink-announcement-bar .title {` `text-transform: uppercase;` `letter-spacing: 2px;` `}` Om de CTA-knop op mobiel de volledige breedte te geven: `.futureblink-announcement-bar.mobile .cta-button {` `width: 100%;` `}` 💡 Je kunt elke geldige CSS-eigenschap gebruiken binnen de meegeleverde selectors. --- # **👀 Stap 4 — Bekijk een voorbeeld van je wijzigingen** Nadat je je CSS hebt ingevoerd: ➡️ Klik op **Apply**. De live voorbeeldweergave wordt automatisch bijgewerkt, zodat je je wijzigingen direct kunt bekijken. Als er aanpassingen nodig zijn: ➡️ Bewerk de CSS direct in de editor. ➡️ Bekijk het bijgewerkte voorbeeld. --- # **⚙️ Hoe Custom CSS werkt** De app past automatisch extra verwerking toe om ervoor te zorgen dat je stijl correct werkt. ### **Automatische \!important-injectie** Alle CSS-declaraties krijgen automatisch `!important`-prioriteit in de winkelweergave om te voorkomen dat themastijlen je wijzigingen overschrijven. ### **Automatische mobiele afhandeling** Selectors met de `.mobile`-variant worden automatisch in mobiele media queries verpakt wanneer ze in je winkelweergave worden weergegeven. ### **Prioriteit bij ontwerpoverschrijving** Custom CSS heeft doorgaans voorrang op standaard ontwerpinstellingen die elders in de app zijn geconfigureerd. --- # **💾 Stap 5 — Opslaan en publiceren** Zodra je tevreden bent over de styling: ➡️ Klik op **Save** (Opslaan). ➡️ Klik op **Publish** (Publiceren). ⚠️ Alleen opslaan werkt je winkelweergave niet bij. De configuratie moet ook worden gepubliceerd voordat klanten de wijzigingen kunnen zien. --- # **🔄 Custom CSS resetten** Als je terug wilt naar de standaard ontwerpinstellingen: ➡️ Open de sectie **Custom CSS**. ➡️ Klik op **Reset** (Resetten). Hiermee verwijder je je aangepaste CSS en geef je de controle terug aan de standaard ontwerpinstellingen. --- # **💡 Handige tips** ### **Begin klein** Maak één wijziging tegelijk, zodat het eenvoudiger is om te zien wat elke CSS-regel beïnvloedt. ### **Gebruik de live voorbeeldweergave** Bekijk wijzigingen altijd in het voorbeeld voordat je publiceert. ### **Test mobiele layouts** Zelfs als je CSS er op desktop goed uitziet, controleer je het uiterlijk ook op mobiele apparaten. ### **Houd een back-up bij** Voor grotere CSS-aanpassingen is het verstandig om een kopie van je code buiten de app te bewaren. --- # **❓ Problemen oplossen** Als je CSS niet wordt toegepast zoals verwacht: ➡️ Controleer of **Apply** is ingeschakeld. ➡️ Controleer of de announcement bar is **Saved** en **Published**. ➡️ Controleer of selectornamen exact overeenkomen met de meegeleverde klassenamen. ➡️ Test in een Incognito-venster om problemen met browsercaching uit te sluiten. Voor geavanceerde stylingvereisten kun je overwegen om samen te werken met een Shopify-ontwikkelaar of je thema-ondersteuningsteam. --- # **🎉 Eindresultaat** ✅ Je announcement bar gebruikt volledig aangepaste styling. ✅ Themaconflicten worden geminimaliseerd doordat CSS-prioriteit automatisch wordt afgehandeld. ✅ Mobiele en desktoplayouts kunnen onafhankelijk worden gestyled. ✅ De announcement bar kan preciezer worden afgestemd op de visuele identiteit van je merk. Custom CSS biedt maximale flexibiliteit wanneer de standaard ontwerpinstellingen niet voldoende zijn, waardoor je een gepolijstere en consistentere winkelervaring kunt creëren. 🚀