> ## 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). # 🎨 Comment définir CSS personnalisé pour les minuteurs et les barres de compte à rebours > ℹ️ **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. Vous voulez que votre minuterie ou barre de compte à rebours corresponde parfaitement à votre marque de magasin? 🎨 Alors que l'application comprend des contrôles de conception étendus, parfois vous avez besoin de flexibilité supplémentaire pour personnaliser des détails de style spécifiques. Les **CSS personnalisé** fonction vous permet d'appliquer vos propres règles CSS aux minuteries et barres de compte à rebours pour une personnalisation visuelle avancée. Ce guide passe en revue tout ce que vous devez savoir sur l'ajout et la gestion de CSS personnalisés pour les placements à rebours. --- # **⚠️ Avant de commencer** Avant d'utiliser Custom CSS: * Assurez-vous d'avoir déjà créé un chronomètre ou une barre de compte à rebours. * Assurez-vous d'avoir accès aux **Conception** onglet dans l'éditeur de compte à rebours. * Avoir une compréhension de base de CSS ou l'accès à un développeur qui peut aider. ⚠️ **Important:** CSS personnalisé est **non disponible pour le compte à rebours de page**. Parce que Shopify Checkout utilise un cadre d'extension de l'interface utilisateur sécurisé, l'injection CSS externe est limitée par Shopify. CSS personnalisé est entièrement pris en charge sur: * Pages de produits * Pages d'atterrissage * Barres supérieures * Barres inférieures * Pages de panier * Tiroirs * Placements par courriel --- # **🛠️ Étape 1 — Ouvrez l'onglet Conception** Ouvrez la minuterie ou la barre de compte à rebours que vous souhaitez personnaliser. Alors : ➡️ Cliquez sur le **Conception** onglet. Faites défiler jusqu'à ce que vous trouviez le **CSS personnalisé** Chapitre. 💡 CSS personnalisé fonctionne en plus de vos paramètres de conception existants, modèles, couleurs et sélections de typographie. --- # **🎨 Étape 2 — Ouvrir la section CSS personnalisée** Dans l'onglet Design : ➡️ Localiser la **CSS personnalisé** carte. Dans cette section vous trouverez: * Un éditeur CSS * Un modèle CSS de démarrage * Une **Appliquer** bouton Le modèle de démarrage comprend des sélecteurs couramment utilisés, ce qui facilite la personnalisation du compte à rebours sans devoir identifier manuellement les noms de classe. --- # **✍️ Étape 3 — Ajouter votre CSS personnalisé** L'éditeur comprend plusieurs sélecteurs prêts à l'emploi. ### **Sélecteurs disponibles** Sélecteur Désignation des marchandises `.futureblink-countdown-timer` Conteneur de compte à rebours entier `.futureblink-countdown-timer .title` Titre principal `.futureblink-countdown-timer .subheading` Texte de sous-position `.futureblink-countdown-timer .cta-button` Bouton d'appel à l'action `.futureblink-countdown-timer .close-btn` Fermer l'icône --- ### **Exemple CSS** Pour rendre le titre gras et changer sa couleur : .futureblink-countdown-timer .title { poids de police: 700; couleur: #ff6600; } 💡 Vous pouvez également ajouter vos propres sélecteurs, requêtes multimédias, animations et règles CSS supplémentaires au besoin. --- # **✅ Étape 4 — Appliquer votre CSS** Après avoir entré votre CSS : ➡️ Cliquez sur **Appliquer**. Une fois activé, **Appliquer** changement de bouton à **Réinitialiser**, indiquant que vos styles personnalisés sont actifs. ### **Ce qui arrive automatiquement** L'application effectue automatiquement plusieurs actions dans les coulisses : * Injecte votre CSS dans la vitrine. * Ajoute `!important` priorité au besoin. * Étendue les styles à la configuration actuelle du compte à rebours. * Prévient les conflits de style avec d'autres comptes à rebours. Cela permet de s'assurer que votre CSS fonctionne de façon uniforme sur tout le marché. --- # **💾 Étape 5 — Enregistrer et publier** Après avoir appliqué votre CSS : ➡️ Cliquez sur **Enregistrer**. ➡️ Cliquez sur **Publier**. ⚠️ Enregistrer seul ne met pas à jour le magasin. Le compte à rebours doit également être publié avant que les clients puissent voir les changements. --- # **👀 Étape 6 — Vérifier les changements** Après publication: ➡️ Ouvrez votre vitrine. ➡️ Naviguez sur la page où le compte à rebours apparaît. ➡️ Rafraîchir la page. Si les styles mis à jour n'apparaissent pas immédiatement, effectuez une mise à jour : **Fenêtres** `Ctrl + Shift + R` **Mac** `Cmd + Shift + R` Si d'autres ajustements sont nécessaires: ➡️ Retournez à l'éditeur. ➡️ Mettez à jour le CSS. ➡️ Cliquez sur **Appliquer**, **Enregistrer**et **Publier** Encore. --- # **⚠️ Remarques importantes** ### **Limitation de la page de vérification** CSS personnalisé n'est pas disponible sur les comptes à rebours de page de départ parce que ShopifyLes extensions d'interface utilisateur Checkout fonctionnent dans un environnement sécurisé qui limite l'injection CSS personnalisée. ### **Manipulation automatique !important** L'application ajoute automatiquement `!important` priorité aux déclarations CSS lors du rendu des styles sur le devant de la boutique. Si `!important` est déjà présent, l'application évite de l'appliquer deux fois. ### **Étendue** Chaque compte à rebours reçoit sa propre portée de style isolée. Cela signifie: ✅ Différents comptes à rebours peuvent avoir des conceptions différentes. ✅ Les styles restent isolés du compte à rebours sélectionné. ✅ D'autres éléments de page restent inchangés. ### **Option de remise à zéro** Cliquer **Réinitialiser** ne supprime que CSS personnalisé. Elle n'affecte pas: * Modèles * Couleurs * Typographie * Paramètres de conception * Configuration du compte à rebours ### **Afficher le guide** La section CSS personnalisée comprend également une **Afficher le guide** lien qui fournit des références CSS supplémentaires au besoin. --- # **❓ Dépannage** Si vos styles ne apparaissent pas correctement : ➡️ Vérifier que **Appliquer** a été cliqué. ➡️ confirmer que le compte à rebours a été **Enregistrer** et **Publié**. ➡️ Vérifiez que les sélecteurs correspondent exactement aux noms de classe fournis. ➡️ Testez en utilisant une fenêtre de navigateur Incognito ou privé. ➡️ Effectuez un rafraîchissement dur pour effacer les styles mis en cache. --- # **🎉 Résultat final** ✅ Votre minuterie ou barre de compte à rebours reflète les exigences de style de votre marque. ✅ Les conflits de style de thème sont minimisés par la manipulation automatique des priorités CSS. ✅ Les comptes à rebours individuels peuvent être définis indépendamment. ✅ Les styles personnalisés restent isolés sans affecter les autres éléments de la vitrine. Le CSS personnalisé offre une façon flexible d'affiner les modèles de compte à rebours tout en gardant le reste de votre configuration simple et facile à gérer. 🚀