ℹ️ 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 dat je countdown timer of bar perfect bij je winkel branding past? 🎨

Terwijl de app bevat uitgebreide ontwerpcontroles, soms heb je extra flexibiliteit nodig om specifieke styling details aan te passen. De Aangepaste CSS functie kunt u uw eigen CSS-regels toe te passen op countdown timers en bars voor geavanceerde visuele aanpassing.

Deze gids loopt door alles wat u moet weten over het toevoegen en beheren van Custom CSS voor countdown plaatsingen.

⚠️ Voordat u begint

Voordat u Aangepaste CSS gebruikt:

• Zorg ervoor dat u al een countdown timer of countdown bar hebt aangemaakt.
• Zorg ervoor dat u toegang hebt tot de Ontwerp tabblad in de countdown editor.
• Heb een basiskennis van CSS of toegang tot een ontwikkelaar die kan helpen.

⚠️ Belangrijk:

Aangepaste CSS is niet beschikbaar voor Afrekenen van pagina's.

Omdat Shopify Checkout maakt gebruik van een beveiligde UI Extension framework, externe CSS injectie is beperkt door Shopify.

Aangepaste CSS wordt volledig ondersteund op:

• Productpagina's
• Landingspagina's
• Bovenste staven
• Onderkant
• Winkelwagen pagina's
• Winkelwagen laden
• E-mail plaatsen

🛠️ Stap 1 Open het ontwerptabblad

Open de countdown timer of bar die u wilt aanpassen.

Dan:

➡️ Klik op de Ontwerp tab.

Scroll naar beneden totdat u de Aangepaste CSS Section.

💡 Aangepaste CSS werkt bovenop uw bestaande ontwerpinstellingen, sjablonen, kleuren en typografie selecties.

🎨 Stap 2 Open de aangepaste CSS sectie

Binnen het tabblad Ontwerp:

➡️ Zoek de Aangepaste CSS kaart.

Binnen deze sectie vindt u:

• Een CSS-editor
• Een starter CSS-sjabloon
• Een Toepassen knop

De starter template bevat veelgebruikte selectoren, waardoor het gemakkelijker is om te beginnen met het aanpassen van het aftellen zonder dat het nodig is om klassenamen handmatig te identificeren.

✍️ Stap 3 Toevoegen van uw aangepaste CSS

De editor bevat verschillende kant-en-klare selectoren.

Beschikbare selectoren

Selectie

Omschrijving

.futureblink-countdown-timer

Volledige aftelcontainer

.futureblink-countdown-timer .title

Hoofdtitel

.futureblink-countdown-timer .subheading

Aanvullende tekst

.futureblink-countdown-timer .cta-button

Call-to-action-knop

.futureblink-countdown-timer .close-btn

Pictogram sluiten

Voorbeeld CSS

Om de titel vet te maken en zijn kleur te veranderen:

.futureblink-countdown-timer .title {
lettergewicht: 700;
kleur: #ff6600;
}

💡 U kunt ook uw eigen selectoren, media queries, animaties en extra CSS-regels toevoegen indien nodig.

✅ Stap 4

Na het invoeren van uw CSS:

➡️ Klik Toepassen.

Eenmaal geactiveerd, de Toepassen knop wijzigt naar Reset, aangeven dat uw aangepaste stijlen actief zijn.

Wat gebeurt er automatisch

De app voert automatisch verschillende acties achter de schermen uit:

• Injecteert uw CSS in de storefront.
• Voegt toe !important prioriteit waar nodig.
• Scopes stijlen naar de huidige aftelconfiguratie.
• Voorkomt styling conflicten met andere countdowns.

Dit helpt ervoor te zorgen dat uw CSS consistent werkt over uw storefront.

💾 Stap 5 Opslaan en publiceren

Na het toepassen van uw CSS:

➡️ Klik Opslaan.

➡️ Klik Publiceren.

⚠️ Alleen opslaan werkt de storefront niet bij.

Het aftellen moet ook worden gepubliceerd voordat klanten de veranderingen kunnen zien.

👀 Stap 6: Controleer de wijzigingen

Na publicatie:

➡️ Open je winkel.

➡️ Ga naar de pagina waar het aftellen verschijnt.

➡️ Vernieuw de pagina.

Als de bijgewerkte stijlen niet onmiddellijk verschijnen, voer dan een harde verversing uit:

Vensters

Ctrl + Shift + R

Mac

Cmd + Shift + R

Indien verdere aanpassingen nodig zijn:

➡️ Terug naar de editor.

➡️ Update de CSS.

➡️ Klik Toepassen, Opslaanen Publiceren Alweer.

⚠️ Belangrijke opmerkingen

Afrekenen Paginabeperking

Aangepaste CSS is niet beschikbaar bij Afrekenen pagina countdowns omdat Shopify's Checkout UI Extensions werken binnen een veilige omgeving die aangepaste CSS injectie beperkt.

Automatische !belangrijke behandeling

De app voegt automatisch toe !important prioriteit aan CSS verklaringen bij het renderen van stijlen op de storefront.

Als !important is al aanwezig, de app vermijdt toepassing tweemaal.

Scoped Styling

Elke countdown ontvangt zijn eigen geïsoleerde styling scope.

Dit betekent:

✅ Verschillende countdowns kunnen verschillende ontwerpen hebben.

✅ Styles blijven geïsoleerd tot het geselecteerde aftellen.

✅ Andere pagina-elementen blijven onaangetast.

Optie resetten

Klikken Reset verwijdert alleen aangepaste CSS.

Het heeft geen invloed op:

• Sjablonen
• Kleuren
• Typografie
• Ontwerpinstellingen
• Aftellen configuratie

Beeldgids

De Custom CSS sectie bevat ook een Beeldgids link die aanvullende CSS referenties geeft indien nodig.

❓ Problemen oplossen

Als uw stijlen niet correct verschijnen:

➡️ Controleer dat Toepassen is geklikt.

➡️ Bevestig het aftellen is Opgeslagen en Gepubliceerd.

➡️ Controleer of de selectie precies overeenkomt met de opgegeven klassenamen.

➡️ Test met behulp van een Incognito of Private browservenster.

➡️ Voer een harde refresh uit om gecachede stijlen te wissen.

🎉 Eindresultaat

✅ Uw countdown timer of bar weerspiegelt de styling-eisen van uw merk.

✅ Thema styling conflicten worden geminimaliseerd door automatische CSS prioriteit behandeling.

✅ Individuele countdowns kunnen onafhankelijk worden vormgegeven.

✅ Aangepaste stijlen blijven geïsoleerd zonder invloed op andere storefront elementen.

Custom CSS biedt een flexibele manier om aftelontwerpen te verfijnen en de rest van uw installatie eenvoudig en eenvoudig te beheren. 🚀

Bijgewerkt op: 10/09/2026