Concevoir un compte à rebours en ligne dans la barre d'annonce

Qu'est-ce qu'un compte à rebours ?

Un compte à rebours est un outil qui compte le temps restant jusqu'à un événement spécifique, comme la fin d'une vente ou le début d'un événement.

En créant un sentiment de urgence et rareté, cela incite les clients à agir rapidement, réduisant ainsi l'hésitation et l'abandon du panier. Ce déclencheur psychologique, souvent appelé peur de manquer quelque chose (FOMO), peut considérablement stimuler les ventes et l'engagement.

Exemples de cas d'utilisation

• Barre d'annonce

• Pages des produits

• Landing Page

Dans ce tutoriel, nous nous concentrerons sur la conception d'un compte à rebours en ligne à l'intérieur d'une barre d'annonce. En ligne Cela signifie que le minuteur se trouve parfaitement sur la même ligne que votre texte promotionnel, au lieu d'être placé en dessous ou séparément.

Comment concevoir un compte à rebours intégré dans la barre d'annonces

Créer un compte à rebours en ligne (« en ligne » signifie que le compte à rebours est placé sur la même ligne que le texte ou d'autres éléments, au lieu d'être séparé), comme celui d'une barre d'annonce.

Étape 1 : Créer une ligne avec deux colonnes

• Ajouter un Élément de ligne au deux colonnes à la mise en page de votre page.

• Dans l' colonne de gauche, faites glisser et déposez un Élément de texte. C'est ici que vous pouvez ajouter un court message promotionnel comme « Offre à durée limitée ! » or « La vente se termine bientôt. »

• Dans l' colonne de droite, faites glisser et déposez le Élément de compte à rebours pour afficher la minuterie.

• Ouvrez le Paramètres de ligne Et définir Largeur de colonne → Ajuster le contenuCela garantit que votre barre d'annonce s'adapte parfaitement au texte et au minuteur sans espace supplémentaire.

Étape 2 : Personnaliser l’élément de texte

Cliquez sur le Élément de texte Dans la colonne de gauche, le panneau de configuration s'ouvre avec deux onglets : Paramètres Avancé. Ici tu peux:

• Modifiez le texte (par exemple, « La livraison gratuite se termine dans : » ou « La vente se termine bientôt »)
• Ajustez le style du texte : police, taille, poids, alignement et couleur
• Modifiez l'arrière-plan, le remplissage ou les marges pour un meilleur espacement

Pour des conseils détaillés, consultez notre article complet sur le Élément de texte.

Étape 3 : Personnaliser l'élément du compte à rebours

Cliquez sur le Élément de compte à rebours Dans la colonne de droite. Dans le panneau des paramètres (Paramètres + Avancé), vous pouvez régler :

• Heure de fin: défini lorsque le compte à rebours se termine
• Gestion des articles: choisissez les unités à afficher (semaines, jours, heures, minutes, secondes) et modifiez leurs légendes
• Options de conception: couleur d'arrière-plan, taille, forme, police et alignement

Pour un style plus avancé, consultez notre guide complet sur le Élément de compte à rebours.

Étape 4 : Personnaliser la disposition des lignes

Enfin, peaufinez le Élément de ligne qui contient à la fois le texte et le compte à rebours :

• Adapter taille de la ligne et alignement pour s'adapter à votre barre d'annonce
• Ajouter ou retirer couleurs de fond pour une meilleure visibilité
• Contrôlez l'espacement et le rembourrage pour garantir que la barre semble équilibrée

Apprenez-en plus dans notre article détaillé sur le Élément de ligne.

Étape 5 : Enregistrer et publier

Lorsque vous avez terminé la conception, cliquez sur Enregistrer et alors Publier. Votre Compte à rebours Shopify apparaîtra désormais dans votre barre d'annonce.