ℹ️ 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, Enregistreret 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. 🚀

Mis à jour le : 10/09/2026