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

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. 🚀

Bijgewerkt op: 01/09/2026