ℹ️ 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.

Het tabblad Design geeft u volledige controle over hoe uw countdown timer eruit ziet op uw storefront. Van kleuren en lettertypen tot timer animaties en achtergrondpatronen, bijna elk visueel detail kan worden aangepast aan uw merk.

Je kunt ofwel:

• Snel starten met Voorgemaakte templates
• Of diep aanpassen elk visueel detail handmatig

Deze gids breekt elke design optie zodat u countdowns die het gevoel native aan uw winkel te bouwen ✨

⚠️ Voordat u begint

De instellingen van het ontwerp configureren:

→ Open een bestaande countdown timer setup
→ Of maak eerst een nieuwe countdown timer

Navigeer dan naar de Ontwerp tabblad in de countdown editor.

ℹ️ De beschikbare ontwerpopties veranderen afhankelijk van welke plaatsingstype Jij hebt gekozen. Bijvoorbeeld checkout pagina countdowns gebruiken Shopify's ontwerp systeem en bieden veel minder aanpassingsmogelijkheden.

🎨 Sjabloon & Zichtbaarheid

Deze sectie regelt het algemene visuele startpunt en de zichtbaarheid van het apparaat voor uw aftelling.

Voorgemaakte sjablonen

De Sjabloon dropdown laat u direct een complete visuele stijl toepassen. Er zijn 24 ingebouwde sjablonen kiezen uit:

• Dageraad Schoon en minimaal
• Elektriciteit Vet en energiek
• Bos Natuurlijke aardtinten
• Neon Helder en opvallend
• Minimaal Eenvoud met gestripte rug
• Munt Zacht en vers
• Kauwgom Speelachtig en kleurrijk
• En nog veel meer

Een sjabloon selecteren vult automatisch in:

• Achtergrondkleuren of -gradiënten
• Randstijlen
• Typografie kleuren en maten
• Knoppenstyling

💡 Als u een sjabloon kiest en vervolgens handmatig individuele instellingen aanpast, worden uw wijzigingen bewaard. Het selecteren van een nieuw sjabloon later zal uw aangepaste waarden overschrijven.

ℹ️ Voor Winkelwagen pagina, Winkelwagenladeen Boven/onderbalk plaatsingen, sjablonen behouden uw bestaande titelgrootte, timergrootteen scheidingsgrootte in plaats van ze te overschrijven.

Zichtbaarheid

Bepaalt op welke apparaten uw aftelling verschijnt:

• Bureaublad en mobiel Overal zichtbaar (standaard)
• Alleen bureaublad Verborgen op mobiele apparaten
• Alleen mobiel Verborgen op het bureaublad

Positie & Sticky gedrag

Deze opties verschijnen alleen voor Boven/onderbalk Aftellen.

• Positie Kies Boven of Onder van de bladzijde
• Sticky Verschijnt alleen wanneer de positie naar boven is ingesteld. Wanneer ingeschakeld, blijft de bar aan de bovenkant van het scherm terwijl klanten scrollen.

Timerstijl

Deze sectie bepaalt hoe de telcijfers zelf worden weergegeven.

ℹ️ Deze sectie is niet beschikbaar voor Winkelwagen pagina, Winkelwagenlade, Winkelwagen Page Standalone, of Afrekenpagina Aftellen.

Beschikbare stijlen

• Schuif klok Classic 3D flip animatie voor elk cijfer
• Dubbele tegels Elk cijfer krijgt zijn eigen mini flip tegel
• Gewone nummers Schone cijfers zonder achtergrondvak
• Vierkante tegels Aantallen binnen afgeronde vierkante dozen
• Cirkeltegels Aantallen in ronde dozen
• Geen Verwijdert de timer cijfers volledig

Timer achtergrondkleur

Deze kleurkiezer verschijnt alleen wanneer u selecteert:

• Schuif klok
• Dubbele tegels
• Vierkante tegels
• Cirkeltegels

Dat doet het wel. niet verschijnen voor Gewone nummers of Geen.

Voor flip klok stijlen, de onderste helft van elke flip tegel wordt automatisch weergegeven in een iets lichtere schaduw van uw gekozen kleur. Dit creëert het realistische 3D flip effect op de storefront.

🖼️ Achtergrond

Deze sectie regelt de achtergrond verschijning van uw countdown container.

ℹ️ Deze sectie is niet beschikbaar voor Afrekenpagina Aftellen.

Achtergrondtypes

• Enkele kleur Een solide achtergrondkleur
• Kleurverloop Twee kleuren gemengd onder een hoek die u controleert
• Tri kleurverloop Drie kleuren gemengd onder een hoek die u controleert
• Patronen Decoratieve achtergrondoverlays

Enkele kleur

Kies een kleur met de Kleurenpicker of voer een Hex-code rechtstreeks.

Kleurverloop

Wanneer geselecteerd, verschijnen drie extra velden:

• Kleurverloophoekgraad Bedient de richting (0° tot 360°)
• Initiële kleur De startkleur
• Laatste kleur De eindkleur

Tri kleurverloop

Wanneer geselecteerd, verschijnen vier extra velden:

• Kleurverloophoekgraad
• Initiële kleur
• Tussenkleur De middelste kleur
• Laatste kleur

Patronen

Indien geselecteerd a Patroon dropdown verschijnt met 37 ingebouwde opties, waaronder:

• Kleine vierkantjes, willekeurig graan, puzzel, bloemen
• Seizoensthema's: verjaardag, ballon, carnaval, paasdag, vaderdag, moederdag, Thanksgiving, veteranendag, vrouwendag
• Sale-gericht: verkoop, korting, bekleding, vers, golven
• En meer

Sommige patronen bevatten subtiele donkere overlays om tekst leesbaar te houden.

📐 Rand

Deze sectie regelt de omtrek van uw countdown container.

ℹ️ Deze sectie is niet beschikbaar voor Afrekenpagina Aftellen.

Randstijl

Kies uit:

• Geen, Gestippeld, Gesneden, Solid, Double, Groove, Ridge, Inset, Outset

Voorwaardelijke grensvelden

De volgende velden verschijnen alleen als Border Style niet "Geen" is:

• Randstraal (px) Hoe afgerond de hoeken verschijnen
• Randgrootte (px) Dikte van de grenslijn
• Randkleur Kleur van de rand

⚠️ Als u een randstijl selecteert terwijl de grootte nog steeds op 0 staat, stelt de app deze automatisch in op 2px zodat de grens zichtbaar wordt.

📏 Spatiëring

Deze sectie regelt de interne en externe afstand rond uw aftellen.

ℹ️ Deze sectie is niet beschikbaar voor Afrekenpagina Aftellen.

Beschikbare velden

• Bovenzijde (px) Ruimte tussen inhoud en de bovenste rand
• Onderkant binnen (px) Spatie tussen inhoud en onderkant
• Bovenzijde (px) Ruimte tussen het aftellen en de elementen erboven
• Buitenonder (px) Ruimte tussen het aftellen en de elementen eronder

💡 Zie "binnen" als vulling en "buiten" als marge. Het verhogen van de externe afstand helpt om het aftellen te scheiden van de nabijgelegen pagina-elementen.

🔤 Typografie

Deze sectie bepaalt hoe alle tekstelementen verschijnen. De exacte beschikbare velden zijn afhankelijk van uw countdown plaatsing.

ℹ️ Deze sectie is niet beschikbaar voor Afrekenpagina Aftellen.

Lettertypefamilie

Kies uit 60+ lettertypeopties, waaronder:

• Gebruik uw themalettertype Komt overeen met uw Shopify thema automatisch
• Systeemlettertypen: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact, en meer
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, en nog veel meer

ℹ️ Als u een Google Font selecteert, laadt de app het automatisch op vanuit Google Fonts op uw storefront. Systeemlettertypen en "Gebruik uw themalettertype" leiden niet tot externe verzoeken.

Typografie Elementen door Plaatsing

Elk element heeft zijn eigen Grootte (px) en Kleur velden:

Productpagina, Landing Page, en aangepaste positie

• Titel Hoofd countdown kop
• Aanvullende Secundaire bericht onder de titel
• Timer De aftelcijfers zelf
• Tijdlabels De "Days," "Hours," "Minutes," "Seconds"
• Uitgebreid bericht Getoond wanneer de timer is verlengd (verschijnt alleen als uw eind actie is ingesteld op "Extend")

Winkelwagen Page en Winkelwagen Lade

• Titel Meestal bevat de {timer} inline variabele
• Timer De live countdown cijfers
• Uitgebreid bericht

ℹ️ Cart-gerelateerde plaatsingen doen niet typografie-opties tonen.

📊 Voortgangsbalk

Deze sectie past de visuele vooruitgang indicator weergegeven boven of onder de timer aan.

ℹ️ Deze sectie is alleen beschikbaar voor Productpagina, Landingspaginaen Eigen positie Aftellen.

Wanneer het verschijnt

De Progress Bar ontwerpkaart verschijnt alleen als U hebt de voortgangsbalk ingeschakeld in de Inhoud Eerst de rekening.

Als de voortgangsbalk niet is ingeschakeld in Content, is deze hele kaart verborgen.

Voortgangsbalkinstellingen

• Achtergrondkleur De kleur van het niet-gevulde deel van de balk (standaard: lichtgrijs)
• Barkleur De kleur van het gevulde gedeelte (standaard: zwart)

Storefrontgedrag

De voortgangsbalk is een 8px hoge afgeronde staaf die evenredig vult op basis van de resterende tijd. Het update elke seconde met een soepele 1-seconde transitie animatie.

Scheidingsteken

Deze sectie regelt de tekens die verschijnen tussen tijdseenheden (tussen dagen, uren, minuten en seconden).

Plaatsen niet-controleren

• Scheidingsteken Kies uit:
• • : Colon
  • - Hyfen
  • . Periode
  • | Verticale balk
  • / Voorwaartse schuine streep
  • Ruimte (leeg)
• Scheidingsgrootte (px)
• Scheidingskleur Hex-kleurkiezer

Afrekenpagina

Omdat checkout countdowns gebruiken Shopify's Checkout UI Extension framework, separator styling is beperkt tot Shopify's vooraf gedefinieerde tokens:

• Scheidingsgrootte Wat? extraSmall, small, base, medium, large, extraLarge
• Scheidingskleur Wat? accent (blauw), subdued (grijs), info (zwart), success (groen), warning (geel), critical (rood)

🔘 Knopontwerp

Deze sectie past de call-to-action-knop aan.

ℹ️ Deze sectie is alleen beschikbaar voor Boven/onderbalk, Landingspaginaen Eigen positie Aftellen.

Knop Animatiestijl

Voegt een continue looping animatie toe aan de knop:

• Geen
• Schudden Zacht side-to-side schudden
• Pols Ritmisch schalend effect
• Zoomen Uitbreidingen en contracten
• Dia Subtiele schuifbeweging
• Vervagen Dekkingspuls
• Draaien Roterende werking
• Pop Snelle schaal stuiteren
• Knipperen Kort knipperend effect

Knoppenafwerkingen

Voegt een interactief effect toe wanneer klanten over de knop zweven:

• Geen
• Gloei Kleurverloop gloed rond de knop
• Blob Biologisch blob morph effect
• Hover puls Puls op muis-over
• Knop 045 Een genummerde vooraf ingestelde stijl
• Flush-knop
• Rechterknop vegen
• Smoosh, Overtrek, Botsing
• Knoppenbel Bubble pop effect
• Squishy
• Masker 1, Masker 2, Masker 3
• Gooey-knop
• 3D-knop Driedimensionaal diepte-effect

Extra knopinstellingen

• Knopkleur Achtergrondkleur van de knop
• Knoptekstgrootte (px)
• Knoptekstkleur
• Randstraal (px) Hoe afgerond de hoeken van de knop zijn

📝 Aangepast berichtontwerp

Deze sectie verschijnt alleen wanneer de actie van het aftellen is ingesteld op Aangepast bericht tonen of Timer verlengen.

Het controleert de typografie van het bericht klanten zien na de timer eindigt.

Beschikbare velden

• Aangepaste titelgrootte (px) + Kleur
• Aangepaste onderverdeling (px) + Kleur

ℹ️ Als uw eindactie meerdere verlengingsintervallen bevat en een van hen een aangepast bericht gebruikt, wordt deze kaart zichtbaar.

❌ Pictogram sluiten

Deze sectie past de knop voor aftellen aan.

ℹ️ Deze sectie is alleen beschikbaar voor Boven/onderbalk Aftellen.

Vereisten

Het sluitpictogram zelf moet eerst worden ingeschakeld in de Inhoud tabblad met behulp van de Pictogram sluiten Checkbox. Als het daar niet is ingeschakeld, heeft deze ontwerpkaart geen effect.

Pictogramkleur sluiten

Kies een hex-kleur voor het X-pictogram. Het pictogram is geplaatst aan de rechterkant van de bar en verticaal gecentreerd.

Storefrontgedrag: Wanneer een klant op het pictogram sluit, wordt de balk verborgen met behulp van browseropslag en zal niet opnieuw verschijnen tijdens die sessie.

💻 Aangepaste CSS

Voor handelaren die behoefte hebben aan styling buiten de ingebouwde opties, kunt u uw eigen CSS schrijven.

ℹ️ Deze sectie is niet beschikbaar voor Afrekenpagina Aftellen.

Beschikbare doelklassen

De editor bevat een standaard template met deze doelklassen:

.futureblink-countdown-timer { }
.futureblink-countdown-timer .title { }
.futureblink-countdown-timer .subheading { }
.futureblink-countdown-timer .cta-button { }
.futureblink-countdown-timer .close-btn { }

Hoe toe te passen

1. Voer uw CSS in in het tekstgebied
2. Klik Toepassen
3. De stijlen worden automatisch in uw storefront geïnjecteerd

⚠️ De app voegt automatisch toe !important op elke CSS eigenschap wanneer toegepast, die helpt om thema conflicten te omzeilen. Als een stijl niet onmiddellijk lijkt te werken, probeer het opslaan en verfrissen van uw storefront.

📍 Ontwerp door Plaatsing

Verschillende countdown plaatsingen hebben verschillende ontwerp mogelijkheden op basis van technische beperkingen.

Productpagina, Landing Page, Aangepaste positie

Deze plaatsingen bieden de volledige ontwerpervaring:

✅ Alle templates
✅ Alle timer stijlen (flip, tegels, effen, enz.)
✅ Volledige achtergrondopties (enkelvoudig, verloop, tri-gradient, patronen)
✅ Rand, afstand, voortgangsbalk
✅ Complete typografieregeling
❌ Knop design niet beschikbaar voor productpagina's
✅ Aangepaste CSS

Boven / onderbalk

Bijna volledige ontwerpopties met enkele plaatsingsspecifieke toevoegingen:

✅ Positie (boven/onder) en kleverig schakelen
✅ Pictogramontwerp sluiten
✅ Knopontwerp
✅ Alle timerstijlen en achtergronden
✅ Aangepaste CSS
❌ Voortgangsbalk niet beschikbaar voor bars

Winkelwagen Page, Winkelwagen Lade, Winkelwagen Page Standalone

Vereenvoudigde layout gericht op inline berichten:

✅ Achtergrond, rand, afstand, scheidingsteken
✅ Titel- en tijdtypografie
✅ Aangepaste CSS
❌ Timer stijl altijd platte inline tekst
❌ Voortgangsbalk
❌ Knopontwerp
❌ Subrubrieken en tijdlabels typografie

Afrekenpagina

Zwaar beperkt door Shopify Checkout-UI-extensies:

✅ Scheidingsgrootte en -kleur (alleen Polaris-tekens)
✅ Titelgrootte en kleur (alleen Polaris tokens)
✅ Timergrootte en kleur (alleen Polaris-tekens)
❌ Sjablonen
❌ Achtergrond, rand, afstand
❌ Timerstijlen alleen platte tekst
❌ Voortgangsbalk
❌ Knoppenstyling
❌ Pictogram sluiten
❌ Aangepaste CSS
❌ Lettertypefamilieselectie

⚠️ Belangrijke opmerkingen

Sjablonen aangepaste waarden overschrijven

Wanneer u een pre-made template selecteert, vervangt het de meeste ontwerpwaarden. Als u al aangepast kleuren en maten handmatig, sla uw werk voor het experimenteren met sjablonen.

Afrekenbeperkingen zijn platformniveau

De beperkte ontwerpopties op kassa pagina's worden opgelegd door Shopify's Checkout UI Extension framework. Dit zijn geen app beperkingen Shopify's Beveiligde checkout omgeving.

Cart Timers zijn altijd gewoon

Cart-gerelateerde countdowns maken de timer als gewone inline tekst omdat de countdown is meestal ingebed in een zin met behulp van de {timer} variabele. Klokken en tegelstijlen zouden de zinstroom visueel breken.

Mobiele timerschaal

Op schermen kleiner dan 633px breed worden timer digit maten automatisch verminderd (meestal met ongeveer 33%) om overstroming te voorkomen en leesbaarheid op mobiele apparaten te behouden.

💡 Cases & voorbeelden gebruiken

Minimale productpaginatimer

→ Plaatsing: Productpagina
→ Timerstijl: gewone getallen
→ Achtergrond: enkele kleur (wit of transparant)
→ Rand: geen
→ Typografie: Kleine titel, medium timer, subtiele separator

Vet Top Bar aankondiging

→ Plaatsing: bovenste/ onderste balk
→ Positie: Boven + Sticky
→ Template: Neon of elektrisch
→ Timer stijl: Flip klok of vierkante tegels
→ Knopanimatie: puls
→ Pictogram sluiten: ingeschakeld met bijpassende kleur

Seizoensgebonden Landing Paginaverkoop

→ Plaatsing: Landing Page
→ Achtergrond: Patroon (bv. verjaardag, carnaval, of seizoensthema)
→ Timerstijl: cirkeltegels
→ Voortgangsbalk: ingeschakeld met merkkleuren
→ Knop: afgeronde hoeken met zweefgloeieffect

🎉 Eindresultaat

Eenmaal succesvol geconfigureerd, helpen de Design & Styling-instellingen u aftellen te maken die als een natuurlijk onderdeel van uw storefront voelen.

✅ Aftellen komen overeen met uw merkkleuren en typografie
✅ Timerstijlen creëren het juiste niveau van visuele urgentie
✅ Achtergronden en patronen bepalen de stemming voor elke campagne
✅ Knoppen vallen op met animaties en zweefeffecten
✅ Ruimte en grenzen geven uw aftellen professionele polijst
✅ Aangepaste CSS ontgrendelt onbeperkte ontwerpflexibiliteit
✅ Elk plaatsingstype respecteert zijn eigen ontwerpbeperkingen

Met behulp van deze design opties zorgt goed uw countdown timers kijken opzettelijk, professioneel, en afgestemd met de rest van uw winkel ✨

Bijgewerkt op: 10/09/2026