ℹ️ Note: Cet article a été traduit automatiquement en utilisant l'IA et peut contenir des inexactitudes. Si quelque chose ne va pas, veuillez contacter notre équipe de soutien.

L'onglet Design vous donne un contrôle complet sur la façon dont votre minuterie compte à rebours apparaît sur votre vitrine. Des couleurs et des polices aux animations de minuterie et aux motifs de fond, presque tous les détails visuels peuvent être personnalisés pour correspondre à votre marque.

Vous pouvez :

• Lancement rapide en utilisant Modèles pré-faits
• Ou profondément personnaliser chaque détail visuel manuellement

Ce guide décompose chaque option de conception pour que vous puissiez construire des comptes à rebours qui se sentent natifs de votre magasin ✨

⚠️ Avant de commencer

Pour configurer les paramètres de conception :

→ Ouvrir une configuration de timer de compte à rebours
→ Ou créez d'abord un nouveau compte à rebours

Ensuite, naviguez jusqu'au Conception onglet dans l'éditeur de compte à rebours.

ℹ️ Les options de conception disponibles varient selon type de placement vous avez choisi. Par exemple, les comptes à rebours de page de caisse utilisent ShopifyLe système de conception et offrent beaucoup moins d'options de personnalisation.

🎨 Modèle et visibilité

Cette section contrôle le point de départ visuel global et la visibilité de l'appareil pour votre compte à rebours.

Modèles préfabriqués

Les Modèle Le menu déroulant vous permet d'appliquer instantanément un style visuel complet. Il y a 24 modèles intégrés au choix, y compris:

• Aube — Propre et minimal
• Électrique — Douce et énergique
• Forêt — Tonalités naturelles de la terre
• Néon — Lumineux et accrocheur
• Minimale — simplicité du dos
• Menthe — doux et frais
• Bubble Gum — ludique et coloré
• Et beaucoup d'autres

Sélection d'un modèle remplit automatiquement :

• Couleurs ou dégradés de fond
• Styles de bordure
• Couleurs et tailles typographiques
• Coiffage du bouton

💡 Si vous choisissez un modèle puis ajustez manuellement les paramètres individuels, vos modifications sont conservées. Choisir un nouveau modèle plus tard écrasera vos valeurs personnalisées.

ℹ️ Pour Page panier, Tiroiret Barre supérieure/bottom placements, modèles préservent votre existant Taille du titre, Taille du minuteuret Taille du séparateur plutôt que de les écraser.

Visibilité

Contrôles sur lesquels votre compte à rebours apparaît :

• Bureau et mobile — Visible partout (par défaut)
• Bureau seulement — cachés sur des appareils mobiles
• Mobile seulement — Caché sur le bureau

Position et comportement collant

Ces options apparaissent uniquement pour Barre supérieure/bottom compte à rebours.

• Fonction — Choisir Haut ou Bas de la page
• Sticky — Apparition seulement lorsque la position est réglée en haut. Lorsque activé, la barre reste fixe en haut de l'écran pendant que les clients défilent.

Style de minuterie

Cette section contrôle comment les chiffres du compte à rebours eux-mêmes sont affichés.

ℹ️ Cette section est non disponible pour Page panier, Tiroir, Page de panier autonomeou Page de départ compte à rebours.

Styles disponibles

• Flip horloge — Classic 3D flip animation pour chaque chiffre
• Doubles carreaux — Chaque chiffre obtient sa propre mini-fiole
• Nombres simples — Chiffres propres sans boîte de fond
• Carreaux carrés — Nombres à l'intérieur des cases carrées arrondies
• Carreaux circulaires — Nombres dans les boîtes circulaires
• Aucune — minuterie cachée — Enlève entièrement les chiffres du minuteur

Couleur de fond du minuteur

Cette sélection de couleurs apparaît seulement lorsque vous sélectionnez & #160;:

• Flip horloge
• Doubles carreaux
• Carreaux carrés
• Carreaux circulaires

C'est vrai. pas apparaissent pour Nombres simples ou Aucune.

Pour les styles d'horloges flip, la moitié inférieure de chaque carrelage flip est automatiquement rendue dans une nuance légèrement plus légère de votre couleur sélectionnée. Cela crée l'effet de retournement 3D réaliste sur le devant du magasin.

🖼️ Historique

Cette section contrôle l'apparence de fond de votre conteneur de compte à rebours.

ℹ️ Cette section est non disponible pour Page de départ compte à rebours.

Types de fond

• Couleur unique — Une couleur de fond solide
• Gradient — Deux couleurs mélangées à un angle que vous contrôlez
• dégradé tricolore — Trois couleurs mélangées sous un angle que vous contrôlez
• Modèles — Revêtements décoratifs

Couleur unique

Choisissez une couleur en utilisant la Récupérateur de couleurs ou entrez une Code Hex directement.

Gradient

Une fois sélectionné, trois champs supplémentaires apparaissent :

• Gradient Angle Degré — Commande la direction (0° à 360°)
• Couleur initiale — La couleur de départ
• Couleur finale — La couleur finale

Gradient tricolore

Une fois sélectionné, quatre champs supplémentaires apparaissent :

• Gradient Angle Degré
• Couleur initiale
• Couleur intermédiaire — La couleur du milieu
• Couleur finale

Modèles

Une fois sélectionné, Modèle le menu déroulant apparaît avec 37 options intégrées, y compris:

• Petits carrés, grain aléatoire, puzzle, fleurs
• Thèmes saisonniers : anniversaire, ballon, carnaval, Pâques, jour des pères, jour des mères, action de grâces, jour des anciens combattants, journée des femmes
• Vente ciblée: vente, remise, rembourrage, frais, ondulé
• Et plus encore

Certains motifs incluent des superpositions sombres subtiles pour garder le texte lisible.

📐 Frontière

Cette section contrôle les contours de votre conteneur de compte à rebours.

ℹ️ Cette section est non disponible pour Page de départ compte à rebours.

Style de bordure

Choisissez parmi :

• Aucun, pointillé, Dashed, solide, double, Groove, Ridge, Inset, Outset

Champs frontaliers conditionnels

Les champs suivants apparaissent seulement lorsque le style Border n'est pas "Aucun":

• Rayon frontalier (px) — Dans quelle mesure les coins apparaissent arrondis
• Taille de la bordure (px) — Épaisseur de la frontière
• Couleur de la bordure — Couleur de la bordure

⚠️ Si vous sélectionnez un style border alors que la taille est toujours définie à 0, l'application le définit automatiquement à 2px la frontière devient visible.

📏 Espacement

Cette section contrôle l'espacement interne et externe autour de votre compte à rebours.

ℹ️ Cette section est non disponible pour Page de départ compte à rebours.

Champs disponibles

• Haut intérieur (px) — Espace entre le contenu et le bord supérieur
• Fond intérieur (px) — Espace entre le contenu et le bord inférieur
• En haut extérieur (px) — Espace entre le compte à rebours et les éléments au-dessus
• Fond extérieur (px) — Espace entre le compte à rebours et les éléments en dessous

💡 Pensez à "intérieur" comme rembourrage et "extérieur" comme marge. L'augmentation de l'espacement extérieur permet de séparer le compte à rebours des éléments de page voisins.

🔤 Typographie

Cette section contrôle comment tous les éléments texte apparaissent. Les champs exacts disponibles dépendent de votre placement.

ℹ️ Cette section est non disponible pour Page de départ compte à rebours.

Famille de polices

Choisissez parmi Options de police 60+, y compris:

• Utiliser la police de votre thème — correspond à votre Shopify thème automatiquement
• Polices système: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courrier New, Segoe UI, Impact, et plus encore
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, et beaucoup d'autres

ℹ️ Si vous sélectionnez une police Google, l'application la charge automatiquement depuis Google Fonts sur votre boutique. Les polices système et "Utilisez votre police thème" ne déclenchent pas les requêtes externes.

Éléments typographiques par placement

Chaque élément a son propre Taille (px) et Couleur champs & #160;:

Page produit, page d'atterrissage et position personnalisée

• Titre — titre du compte à rebours
• Sous-positions — Message secondaire sous le titre
• Minuterie — Les chiffres du compte à rebours
• Étiquettes temporelles — Le texte "Jours", "Heures", "Minutes", "Seconds"
• Message étendu — Afficher lorsque le minuteur est étendu (apparaît seulement si votre action finale est définie à "Extend")

Tiroir de page et de panier

• Titre — contient habituellement {timer} variable inline
• Minuterie — Les chiffres du compte à rebours
• Message étendu — Apparaît seulement si l'action finale est "Extend"

ℹ️ Placements liés au chariot pas afficher les options de typographie des sous-titres ou des étiquettes temporelles.

📊 Barre de progression

Cette section personnalise l'indicateur de progression visuelle montré ci-dessus ou en dessous du minuteur.

ℹ️ Cette section est uniquement disponible pour Page produit, Page d'atterrissageet Position personnalisée compte à rebours.

Quand il apparaît

La carte de conception de la barre de progression apparaît seulement si vous avez activé la barre de progression dans la Contenu onglet d'abord.

Si la barre de progression n'est pas activée dans Contenu, cette carte entière est cachée.

Paramètres de la barre de progression

• Couleur de fond — La couleur de la partie non remplie de la barre (par défaut: gris clair)
• Couleur de barre — La couleur de la partie remplie (par défaut: noir)

Comportement en magasin

La barre de progression est une barre arrondie de 8px de haut qui se remplit proportionnellement en fonction du temps restant. Il met à jour chaque seconde avec une animation de transition d'une seconde.

Séparateur

Cette section contrôle les caractères qui apparaissent entre les unités de temps (entre les jours, les heures, les minutes et les secondes).

Non-dépôts

• Caractère du séparateur — Choisissez parmi:
• • : Colonne
  • - Hyphène
  • . Période
  • | Barre verticale
  • / Coupe vers l'avant
  • Espace (blanc)
• Taille du séparateur (px)
• Couleur du séparateur — Cueillette de couleur Hex

Page de départ

Parce que les comptes à rebours de caisse utilisent Shopify's Checkout UI Extension framework, style séparateur est limité à Shopify's jetons prédéfinis:

• Taille du séparateur — extraSmall, small, base, medium, large, extraLarge
• Couleur du séparateur — accent (bleu), subdued (gris), info (noir), success (vert), warning (jaune), critical (rouge)

🔘 Conception du bouton

Cette section personnalise le bouton d'appel à action.

ℹ️ Cette section est uniquement disponible pour Barre supérieure/bottom, Page d'atterrissageet Position personnalisée compte à rebours.

Style d'animation du bouton

Ajoute une animation en boucle continue au bouton :

• Aucune — Bouton statique
• Agiter — Shake latéral doux
• Pouls — Effet d'échelle rythmique
• Zoom — Élargissement et contrats
• Diapositive — Mouvement glissant subtil
• Fade — pouls d'opacité
• Tourner — Effet rotatif
• Pop — rebond rapide de l'échelle
• Lien — bref effet clignotant

Effets du bouton Hover

Ajoute un effet interactif lorsque les clients survolent le bouton :

• Aucune
• Souffle — Lumière graduée autour du bouton
• Bloc — Effet morphologique organique
• Hover impulsion — Pouls sur souris
• Bouton N° 045 — Un style préréglé numéroté
• Bouton flush
• Faites glisser le bouton droit
• Smoush, Déplacement, Collision
• Bouton bulle — Effet pop bulle
• Squishy
• Masque 1, Masque 2, Masque 3
• Bouton Gooey
• Bouton 3D — Effet de profondeur tridimensionnel

Paramètres du bouton supplémentaire

• Couleur du bouton — Couleur de fond du bouton
• Taille du texte du bouton (px)
• Couleur du texte du bouton
• Rayon frontalier (px) — Les coins des boutons sont arrondis

📝 Conception du message personnalisé

Cette section apparaît seulement lorsque l'action finale de votre compte à rebours est définie à Afficher le message personnalisé ou Étendre le minuteur.

Il contrôle la typographie des messages que les clients voient après la fin du minuteur.

Champs disponibles

• Taille du titre personnalisé (px) + Couleur
• Taille de sous-position personnalisée (px) + Couleur

ℹ️ Si votre action finale comprend plusieurs intervalles d'extension et que l'un d'eux utilise un message personnalisé, cette carte devient visible.

❌ Fermer l'icône

Cette section personnalise le bouton de rejet pour les barres de compte à rebours.

ℹ️ Cette section est uniquement disponible pour Barre supérieure/bottom compte à rebours.

Préalable

L'icône de fermeture elle-même doit d'abord être activée dans la Contenu onglet en utilisant le Fermer l'icône à cocher. Si elle n'est pas activée, cette carte n'a aucun effet.

Fermer la couleur de l'icône

Choisissez une couleur hexagonale pour l'icône X. L'icône est placée au bord droit de la barre et verticalement centrée.

Comportement avant stockage : Lorsqu'un client clique sur l'icône close, la barre est cachée en utilisant le stockage du navigateur et ne réapparaîtra pas pendant cette session.

💻 CSS personnalisé

Pour les marchands qui ont besoin de style au-delà des options intégrées, vous pouvez écrire votre propre CSS.

ℹ️ Cette section est non disponible pour Page de départ compte à rebours.

Catégories cibles disponibles

L'éditeur inclut un modèle par défaut avec ces classes cibles :

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

Comment faire une demande

1. Entrez votre CSS dans la zone texte
2. Cliquez sur Appliquer
3. Les styles sont injectés dans votre vitrine automatiquement

⚠️ L'application s'ajoute automatiquement !important à chaque propriété CSS lorsqu'elle est appliquée, ce qui aide à surmonter les conflits de thème. Si un style ne semble pas fonctionner immédiatement, essayez de sauver et de rafraîchir votre vitrine.

📍 Conception par placement

Différents placements à rebours ont des capacités de conception différentes en fonction des contraintes techniques.

Page produit, Page d'atterrissage, Position personnalisée

Ces placements offrent une expérience de conception complète:

✅ Tous les modèles
✅ Tous les styles de minuterie (flip, carrelage, plaine, etc.)
✅ Options de fond complètes (simple, dégradé, tri-gradient, modèles)
✅ Bordure, espacement, barre de progression
✅ Contrôles de typographie complets
❌ Conception de bouton — non disponible pour les pages de produit
✅ CSS personnalisé

Barre supérieure / inférieure

Des options de conception presque complètes avec quelques ajouts spécifiques au placement:

✅ Position (en haut/en bas) et bascule collante
✅ Fermer la conception de l'icône
✅ Conception de bouton
✅ Tous les styles de minuterie et les milieux
✅ CSS personnalisé
❌ Barre de progression — non disponible pour les barres

Page de panier, Tiroir de panier, Page de panier autonome

Mise en page simplifiée axée sur la messagerie en ligne :

✅ Contexte, bordure, espacement, séparateur
✅ Titre et typographie des minuteries
✅ CSS personnalisé
❌ Style minuterie — toujours un texte en ligne
❌ Barre de progression
❌ Conception de bouton
❌ typographie des étiquettes de sous-positions et des heures

Page de départ

Très limitée en raison Shopify Extensions d'assurance-chômage de départ :

✅ Taille et couleur du séparateur (jetons Polaris seulement)
✅ Taille du titre et couleur (jetons Polaris seulement)
✅ Taille et couleur du minuteur (jetons Polaris seulement)
❌ Modèles
❌ Contexte, bordure, espacement
❌ Styles de minuterie — texte simple seulement
❌ Barre de progression
❌ Coiffage du bouton
❌ Fermer l'icône
❌ CSS personnalisé
❌ Sélection de la famille des polices

⚠️ Remarques importantes

Modèles Suppression des valeurs personnalisées

Lorsque vous sélectionnez un modèle pré-fait, il remplace la plupart des valeurs de conception. Si vous avez déjà personnalisé les couleurs et les tailles manuellement, enregistrez votre travail avant d'expérimenter avec des modèles.

Les limitations de départ sont de niveau plate-forme

Les options de conception restreintes sur les pages de caisse sont imposées par Shopify's Checkout UI Extension framework. Ce ne sont pas des limitations de l'application — ils garantissent que votre compte à rebours reste compatible avec ShopifyL'environnement sécurisé de la caisse.

Les minuteurs sont toujours simples

Les comptes à rebours liés au cart rendent le minuteur comme un texte en ligne simple parce que le compte à rebours est généralement intégré dans une phrase en utilisant le {timer} variable. Flip horloges et les styles de tuiles briseraient le flux de phrase visuellement.

Scalage de la minuterie mobile

Sur les écrans d'une largeur inférieure à 633px, les dimensions des chiffres du minuteur sont automatiquement réduites (habituellement d'environ 33%) pour éviter le débordement et maintenir la lisibilité sur les appareils mobiles.

💡 Cas d'utilisation et exemples

minuterie minimale de la page de produit

→ Placement : Page produit
→ Style de minuterie : Nombres simples
→ Fond: Couleur unique (blanc ou transparent)
→ Frontière : Aucun
→ Typographie : Petit titre, minuterie moyenne, séparateur subtil

Annonce du haut de la barre

→ Placement : Bar du haut/du haut
→ Position : Haut + Sticky
→ Modèle : Néon ou électrique
→ Style minuterie : Horloge à bascule ou carreaux carrés
→ Bouton Animation: Pulse
→ Fermer Icône : Activé avec la couleur correspondante

Vente de page d'atterrissage saisonnier

→ Placement : Page d'atterrissage
→ Contexte : Motif (p. ex. anniversaire, carnaval ou thème saisonnier)
→ Style de minuterie: Carreaux circulaires
→ Barre de progression : Activée avec des couleurs de marque
→ Bouton : Coins arrondis avec effet éclat de vol stationnaire

🎉 Résultat final

Une fois configurés avec succès, les paramètres Design & Styling vous aident à créer des comptes à rebours qui se sentent comme une partie naturelle de votre vitrine.

✅ Les comptes à rebours correspondent aux couleurs et à la typographie de votre marque
✅ Les styles de minuterie créent le bon niveau d'urgence visuelle
✅ Les antécédents et les modèles définissent l'ambiance de chaque campagne
✅ Les boutons se distinguent par des animations et des effets de vol stationnaire
✅ Espacement et bordures donnent votre compte à rebours professionnel poli
✅ CSS personnalisé débloque une flexibilité de conception illimitée
✅ Chaque type de placement respecte ses propres contraintes de conception

L'utilisation de ces options de conception garantit que vos minuteurs de compte à rebours semblent intentionnels, professionnels et alignés avec le reste de votre magasin ✨

Mis à jour le : 10/09/2026