Pourquoi utiliser le timer global

Le compteur à rebours est l'un des leviers de conversion les plus puissants en e-commerce. En affichant une date limite visible, vous créez un sentiment d'urgence qui pousse le visiteur à agir immédiatement plutôt que de reporter son achat. Les études montrent qu'un timer bien placé peut augmenter le taux de conversion de 8 à 15 %.

Le timer global de Scale Theme centralise la gestion de cette date limite. Au lieu de configurer chaque compteur individuellement dans chaque section de votre boutique, vous définissez une seule date et heure dans les réglages du thème. Tous les blocs Timer de votre site se synchronisent automatiquement sur cette échéance, garantissant une cohérence parfaite entre la bannière, les pages produit, les popups et toute autre section contenant un compteur.

Cette approche centralisée est particulièrement précieuse lors des opérations commerciales récurrentes (ventes flash, Black Friday, soldes saisonnières). Quand la promotion change, un seul ajustement dans les réglages du thème met à jour instantanément tous les timers de votre boutique, éliminant le risque d'afficher des dates incohérentes.

Guide de configuration

Accéder aux réglages du timer global

1. Ouvrez l'éditeur de thème Shopify (Online Store > Themes > Customize)
2. Cliquez sur Theme settings (icône d'engrenage en bas à gauche)
3. Recherchez la section Timer settings
4. Renseignez la date et l'heure de fin de votre promotion

Définir la date et l'heure limite

Le timer global utilise deux champs pour définir l'échéance :

Par exemple, pour une vente flash qui se termine le 15 mars 2026 à 20h00, configurez :

• Date : 2026-03-15
• Heure : 20:00

Ajouter un bloc Timer dans une section

Une fois la date globale définie, vous pouvez ajouter un bloc Timer dans n'importe quelle section compatible :

1. Ouvrez la section concernée dans l'éditeur (bannière, page produit, countdown, etc.)
2. Cliquez sur Ajouter un bloc
3. Sélectionnez Timer
4. Par défaut, le bloc utilise la date globale définie ci-dessus
5. Personnalisez le style et l'apparence selon vos besoins

Paramètres du timer global

Les réglages suivants sont accessibles dans Theme settings > Timer settings :

Ces deux valeurs constituent la référence utilisée par tous les blocs Timer configurés en mode global.

Paramètres du bloc Timer

Chaque bloc Timer individuel offre des réglages avancés pour personnaliser son apparence et son comportement.

Contenu

Configuration du timer

Affichage

Options spécifiques au style Badge

Les paramètres suivants ne sont visibles que lorsque le style Badge est sélectionné :

Les 4 styles de timer

Scale Theme propose quatre styles visuels distincts pour le compteur à rebours, chacun adapté à un contexte différent.

Style Cards (défaut)

Le style Cards affiche chaque unité de temps (jours, heures, minutes, secondes) dans une carte individuelle avec le label en dessous. C'est le style le plus lisible et le plus polyvalent.

Quand l'utiliser :

• Sur les pages produit pour créer l'urgence
• Dans les sections countdown dédiées
• Quand vous souhaitez un rendu clair et structuré

Style Bold

Le style Bold affiche les nombres en grande taille sans carte, avec les labels en dessous. L'effet est plus impactant et minimaliste.

Quand l'utiliser :

• Dans les bannières hero avec fond image
• Quand l'espace est généreux et que le timer est l'élément central
• Pour un rendu impactant et moderne

Style Flip

Le style Flip reproduit l'effet d'un compteur mécanique à volets. Chaque changement de chiffre déclenche une animation de rotation élégante, comme un tableau d'affichage d'aéroport.

Quand l'utiliser :

• Pour un rendu premium et mémorable
• Sur les landing pages de lancement produit
• Quand vous voulez capter l'attention avec une animation distinctive

Style Badge

Le style Badge est le plus compact. Il affiche le compte à rebours sur une seule ligne avec des suffixes abrégés (2j 14h 30m 12s). Idéal pour les emplacements où l'espace est limité.

Quand l'utiliser :

• Comme badge sur les cartes produit
• Dans les barres d'annonce en haut de page
• Quand l'espace est limité et le timer doit rester discret
• En combinaison avec une icône ou un label flottant

Mode global vs mode personnalisé

Chaque bloc Timer dispose d'une option "Override timer" qui détermine la source de la date d'échéance :

Cette flexibilité vous permet de :

• Avoir la majorité des timers synchronisés sur la date globale (vente flash du week-end)
• Garder un timer spécifique avec sa propre date (lancement d'un produit particulier)
• Gérer plusieurs promotions simultanées avec des échéances différentes

Que se passe-t-il quand le timer expire

Quand la date limite est atteinte, le comportement dépend de la configuration du bloc Timer :

Afficher un message de fin

Si le paramètre End text est renseigné, le compteur est remplacé par ce texte personnalisé. Exemple : "Offre terminée" ou "Rendez-vous à la prochaine promo !".

Afficher 00:00:00

Si aucun texte de fin n'est défini, le compteur reste visible mais affiche 00 pour chaque unité de temps. La classe CSS timer--ended est ajoutée à l'élément, permettant un style différent via CSS.

Redirection automatique

Le timer supporte une option de redirection via l'attribut data-redirect-url. Quand le timer expire, le visiteur est automatiquement redirigé vers l'URL spécifiée (page collection, page d'accueil, etc.).

Événement JavaScript

À l'expiration, le timer émet un événement personnalisé timer:end qui remonte dans le DOM. Les développeurs peuvent écouter cet événement pour déclencher des actions personnalisées :

document.addEventListener('timer:end', function(event) {
  // Masquer la section, afficher un message, etc.
});

Exemples de configuration

Vente flash week-end

Configurez le timer global sur la date et l'heure de fin de votre promotion du week-end. Ajoutez des blocs Timer dans :

• La bannière hero de la page d'accueil (style Bold ou Flip)
• Les pages produit concernées (style Cards, taille 80%)
• Une section countdown dédiée avec image de fond et CTA

Configuration type :

• Date : le dimanche soir à 23:59
• Style bannière : Bold, couleur Accent 1
• Style produit : Cards, taille 80%, couleur Foreground
• End text : "Offre terminée — Rendez-vous au prochain week-end promo !"

Lancement produit

Utilisez le timer global avec la date de disponibilité du nouveau produit. Les visiteurs voient le compte à rebours partout sur le site, créant l'anticipation.

Configuration type :

• Date : jour et heure du lancement
• Style : Flip pour un effet premium
• Heading : "Disponible dans..."
• Text : "Soyez parmi les premiers à découvrir notre nouvelle collection"

Offre saisonnière avec exceptions

Pendant le Black Friday, définissez la date globale sur le lundi minuit (fin du Cyber Monday). Pour un produit en édition limitée avec une offre qui termine plus tôt, activez l'override sur son bloc Timer et configurez une date personnalisée.

Configuration type :

• Timer global : fin du Cyber Monday
• Timer produit limité : override activé, date spécifique au vendredi soir
• Style : Badge compact pour le produit limité, Cards pour le reste

Timer discret sur carte produit

Utilisez le style Badge pour afficher un petit compteur directement sur les pages collection ou les cartes produit, sans prendre trop d'espace.

Configuration type :

• Style : Badge
• Taille : 70%
• Background : Tinted
• Icône : Fire ou Clock
• Floating label : "Promo"

Fonctionnement technique

Architecture du composant

Le timer est implémenté comme un Web Component (<timer-element>) qui se charge via un script dédié (js-timer.js). Le script est chargé en defer uniquement quand un bloc Timer est présent dans la page, évitant tout impact sur les performances des pages sans compteur.

Calcul du temps restant

Le timer calcule la différence entre l'heure actuelle (Date.now()) et la date de fin stockée dans l'attribut data-end-date. Le calcul est effectué chaque seconde via setInterval et décomposé en jours, heures, minutes et secondes.

Support du Design Mode

Le timer supporte pleinement l'éditeur Shopify. Quand vous modifiez les réglages dans le Design Mode, le composant se réinitialise automatiquement pour refléter les changements en temps réel, sans nécessiter de rechargement de la page.

Respect de l'accessibilité

• Les séparateurs visuels entre les unités de temps portent l'attribut aria-hidden="true"
• Chaque unité affiche un label textuel (Jours, Heures, Min, Sec)
• L'animation Flip est désactivée quand prefers-reduced-motion est actif

Bonnes pratiques

• Définissez une vraie date limite : un timer qui ne correspond à aucune promotion réelle dégrade la confiance. Les clients détectent les faux compteurs.
• Adaptez le style au contexte : Cards pour les pages produit, Bold ou Flip pour les sections hero, Badge pour les espaces compacts.
• Ne multipliez pas les timers sur une même page : un ou deux compteurs maximum. Au-delà, l'effet d'urgence se dilue.
• Préparez le message de fin : renseignez toujours le champ End text pour éviter un compteur bloqué sur 00:00:00.
• Mettez à jour régulièrement : après chaque promotion, modifiez la date globale pour la prochaine échéance ou désactivez les blocs Timer temporairement.
• Testez les fuseaux horaires : si votre clientèle est internationale, vérifiez que l'heure de fin correspond bien au fuseau de votre boutique Shopify.
• Utilisez la taille de manière stratégique : un timer à 150% dans une bannière hero attire l'attention, un timer à 70% en badge reste discret.

Prochaines étapes

• **Bloc Countdown Timer** — Configuration détaillée du bloc Timer sur les pages produit
• **Section Countdown** — Section plein écran dédiée au compte à rebours avec image de fond
• **Guide Flash Sale** — Guide complet pour organiser une vente flash réussie
• **Bannière** — Ajoutez un timer dans votre bannière hero