> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Compte à rebours — Conception et styling > ℹ️ **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**, **Tiroir**et **Barre supérieure/bottom** placements, modèles préservent votre existant **Taille du titre**, **Taille du minuteur**et **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 autonome**ou **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'atterrissage**et **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'atterrissage**et **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 ✨