Section compte à rebours avec image hero, 3 variantes d'affichage et mode evergreen.
Countdown
La section Countdown affiche un compte à rebours visuel avec une image d'arrière-plan percutante. Parfaite pour créer l'urgence autour d'une vente flash, d'un lancement produit ou d'un événement.
3 variantes
| Variante | Description | Idéal pour |
|---|---|---|
| Hero | Timer superposé sur une image plein écran | Lancements, événements majeurs |
| Split | Image d'un côté, timer + contenu de l'autre | Promotions avec détails |
| Minimal | Timer compact sans image de fond | Bannières, sections intégrées |
Settings principaux
Timer
| Setting | Description | Options |
|---|---|---|
| Date cible | Date de fin du compte à rebours | Date picker |
| Heure cible | Heure précise de fin | Time picker |
| Mode evergreen | Redémarre automatiquement pour chaque visiteur | On / Off |
| Durée evergreen | Durée du timer en mode evergreen | Heures / Minutes |
| Afficher les secondes | Montrer les secondes | On / Off |
| Action à zéro | Comportement quand le timer atteint 0 | Masquer section / Afficher message / Rediriger |
Média
| Setting | Description | Options |
|---|---|---|
| Image desktop | Image de fond | Image picker |
| Image mobile | Image dédiée mobile | Image picker |
| Overlay | Opacité de l'overlay | 0-100% |
| Hauteur | Hauteur de la section | Small / Medium / Large / Full screen |
Style du timer
| Setting | Description | Options |
|---|---|---|
| Style des chiffres | Apparence visuelle | Cartes / Cercles / Minimal / Flip |
| Taille | Taille du timer | Small / Medium / Large |
| Labels | Texte sous les chiffres | Jours/Heures/Min/Sec personnalisables |
Blocs disponibles
| Bloc | Description |
|---|---|
| Heading | Titre principal (ex: "Vente Flash") |
| Subheading | Sous-titre complémentaire |
| Text | Description de l'offre |
| Button | CTA vers la collection/produit |
| Timer | Le compte à rebours lui-même |
Mode Evergreen
Le mode evergreen crée un timer personnalisé pour chaque visiteur. Au lieu d'une date fixe, le timer démarre au premier chargement et se réinitialise automatiquement.
| Paramètre | Description |
|---|---|
| Durée | Temps total du countdown (ex: 2h, 24h) |
| Cookie | Durée de mémorisation du timer par visiteur |
| Restart | Le timer redémarre après expiration |
ℹ️Le mode evergreen utilise un cookie pour mémoriser le moment du premier affichage. Chaque visiteur voit donc un timer différent, toujours en cours. Idéal pour les offres "temps limité" permanentes.
Cas d'utilisation
Vente flash
- Variante Hero en Full screen
- Date cible fixe (fin de la promo)
- Style Flip pour l'effet dynamique
- Bloc Heading "Vente Flash" + Button "Voir les offres"
- Action à zéro : masquer la section
Lancement produit
- Variante Split avec image produit
- Date du lancement comme cible
- Style Cartes, taille Large
- Blocs Heading + Text (description) + Button (pré-commande)
Offre permanente avec urgence
- Variante Minimal intégrée dans la page
- Mode Evergreen activé (durée 2h)
- Style Minimal, taille Small
- Message : "Cette offre expire dans..."
- Redémarrage automatique
💡Le style Flip (animation de retournement des chiffres) est le plus engageant visuellement. Il attire l'oeil et renforce le sentiment d'urgence.
⚠️N'abusez pas du mode evergreen. Si vos clients réguliers remarquent que le timer se réinitialise, cela peut nuire à la confiance. Réservez-le aux offres réellement limitées dans le temps pour chaque visiteur.
Prochaines étapes
- Countdown timer (conversion) — Timer intégré à la page produit
- Réglages du timer — Configuration globale des compteurs
- Créer une vente flash — Guide complet avec countdown
- Popup — Combinez popup et urgence